When it comes to CSS layouts, the two main tools at your disposal are Grid and Flexbox. While both are awesome at creating layouts, they serve different purposes and have different strengths and weaknesses.
Learn how both layout methods behave and when to use one over the other.
The Different Behavior of CSS Flexbox and Grid
To help visualize things, create anindex.htmlfile in your preferred folder and paste in the following markup:
Both divs contain the exact same children so you can apply a different system to each and compare them.
You can also see that the HTML imports a style sheet file namedstyle.css. Create this file in the same folder asindex.htmland paste the following styles in it:
Your page should look like this:
Now, to turn the firstinto a flex column, simply add the following code to your style sheet:
This is the result:
Theflex-containerdiv now lays out its child elements in columns. These columns are flexible and responsive—they adapt their width based on the space available in the viewport. This behavior is one of the mainbasic concepts behind Flexbox.
To prevent overflowing columns in theflex-container, you can use theflex-wrapproperty:
If there isn’t enough room for the child elements to fit on one line, they’ll now wrap around and continue on the next.
Now apply a Grid layout to the secondusing this CSS:
Nothing will happen with the above declaration alone because the default behavior of Grid creates rows that stack on top of each other.
To switch to a column display, you need to change thegrid-auto-flowproperty (which isrowby default):
Now here’s the result:
To specify the exact number of columns you want on each line, usegrid-template-columns:
This value creates five equal-width columns. To get a wrapping behavior similar to Flexbox, you can use responsive properties likeauto-fitandmin-max:
You’ll often hear Flexbox and Grid referred to as one-dimensional and two-dimensional, respectively. That’s not the full truth, however, because both Flexbox and Grid can make atwo-dimensional layout system. They just do it in different ways, with different constraints.
What’s most important is the way that you can control the one-dimensional aspect of the layout. Consider the following image, for example:
Observe how consistent the Grid column is and how uneven each column in the Flexbox is. Each row/column in a flex container is independent of the other. So some might be bigger than others, depending on the size of their content. These are less like columns and more like independent blocks.
Grid works differently, by setting up a 2D grid with columns locked in by default. A column with short text will be the same size as one with much longer text, as the above image demonstrates.
In summary, CSS Grid is a little bit more structured, while Flexbox is a moreflexible and responsive layout system. These alternative layout systems are well-named!
When to Use Flexbox
Do you want to rely on the intrinsic sizing of each column/row, as defined by their content? Or do you want to have structured control from the parent’s perspective? If your answer is the first, then Flexbox is the perfect solution for you.
To demonstrate this, consider a horizontal navigation menu. Replace the markup within thetags with this:
Replace the markup in the CSS file with this:
Here’s the result:
Now, transform the first navigation into a flex layout and the second into a grid layout by adding the following CSS:
Compare the results to see which was more suitable:
From the above image, you may see that Flexbox is the perfect solution in this case. You have items that you want to go next to each other and maintain their intrinsic sizing (big or small depending on the text length). With Grid, each cell has a fixed width, and it doesn’t look as good—with plain text links, at least.
When to Use CSS Grid
One place that Grid really excels is when you want to create a rigid system from the parent. An example is a set of card elements that should be equally wide, even if they contain different amounts of content.
Replace the markup inside thetags with this:
Add this CSS:
You’re starting with a Flexbox display to see how it looks, so you may compare it to the grid display. Here’s the output:
Notice how the last column is bigger than others because of its intrinsic sizing, which is what Flexbox handles well. But to make them the same width using Flexbox, you would have to go against that intrinsic sizing by adding the following:
This does the trick. But Grid is better suited for cases like this. You just specify the number of columns, and you’re good to go:
Another advantage of using Grid is that the parent is controlling the layout of the children. So you’re able to add and remove child elements without worrying about breaking the layout.
So When Should You Use Grid or Flexbox?
In summary, CSS Grid is great when you want a structured control from the parent’s perspective, with an equal size of columns regardless of the size of its individual contents.
Flexbox, on the other hand, is ideal when you want a more flexible system based on the intrinsic sizing of elements.
