The purpose of this blog post is to compare and contrast Flexbox and CSS Grid. These are a few points for comparison:
- How to conceptualize and plan layout
- Ideal use case scenarios
- Ease of use
Caveat: My approach to web development is fairly quick and dirty, having come from more startup type experiences (as Tech Writer and FE Dev contractor) than not. As a result, my biases are towards learning the minimal concepts necessary to get about 80% typical use cases done.
How to Conceptualize/Plan Layout with Flexbox
When planning out one responsive layout design in both Flexbox and CSS Grid, I felt like the main difference for thinking about Flexbox were the ideas of:
- content container
- how data should flow through a content container
These are some sketches used to visualize how the grid content would flow across breakpoints.
By scanning the planning sketches hopefully you could get an idea that all that was necessary was to:
- understand the number of columns per view (also the relative proportion of space needed by each column)
- understand how content should lay out within the column
- understand how the repeating pattern of data should display
How to Conceptualize/Plan Layout with CSS Grid
For CSS Grid, I felt like it was more important to sketch out a precise grid, as though the webpage were like a piece of graph paper and I had to lay out the skeleton that would support the content.
Note: To be technically correct for a 2 column grid with margins (far left and far right), this should be a 4 column diagram. The far left and far right columns would actually be empty spacers. The resulting vertical line count would be 1-2-3-4-5.
TODO: redraw the grids with proper columns
Ideal Use Case Scenarios
My belief is that flexbox is a better choice when the required grid is relatively simple and when the data to be displayed is dynamic (for example, coming from a database and the total number of records returned from a query is not always constant).
On the other hand, if the required grid is relatively complex and the desired design layout needs to be pixel perfect, CSS Grid allows for a more granular level of control. Also if the data to be displayed is static, CSS Grid could be an option.
Ease of Use
Generally my preferred tool would be flexbox because the same CSS would easily scale to a dynamic size of data.
In contrast, I felt with CSS grid, there would be a bit of calculation and scripting required to make the CSS able to support a dynamic size of data. See CSS in the sample source (about line 60 and later).
What do you think? If it seems like CSS grid is more versatile, please explain your use case in the comments.
https://gridbyexample.com/ (not used for this article but a good one)
For Flexbox resources, please see a previous article.