Flexbox vs. CSS Grid
2 May 2018
Flexbox vs. CSS Grid
When to Use What
The general advice for when to use Flexbox and when to use CSS Grid is to use Flexbox for one-dimensional layouts and CSS Grid for multi-dimensional layouts. But what does that really mean?
One-dimensional layouts are when you want to stack elements in either rows or columns. Even if a row has to wrap when more elements are added, those are essentially just wrapping (flex-wrap) and part of the same long row.
Multi-dimensional layouts are when you want to take both rows and columns into account when positioning elements. Think of the Grid as a chess board or a map, where the position is determined not only by rows but also by columns. CSS Grid keeps track of both directions at the same time.
Use Flexbox when…
You want to line elements up in one direction, and it is ok that the elements don’t line up in the other direction. Perhaps you want elements that don’t fill up an entire row to be centered.
Notice how the items in the second row are centred. The columns do not line up.
You need to support older browsers. Flexbox has full browser support in modern browsers (as well as Edge and Safari 8 with prefix), and partial support in Internet Explorer 11 and 10.
You want to animate the elements. As for now, animation support for flexbox is much better than for CSS Grid (although it is possible to animate elements inside the grid like is done in this example).
Use CSS Grid when…
You don’t have to support older browsers. Dealing with outdated or non-supporting browsers is as simple as wrapping a @supports rule around the CSS code concerning grid. Compared to Flexbox, CSS Grid has fewer browser bugs and behaves more consistent across different browsers.
You want better control of elements that vary in size depending on their surroundings, for example by using auto-fit and auto-fill.
You want full control over the placement of your elements. For example, you want to be able to overlap or place elements on top of each other. Even if CSS Grid automatically will place elements aligned in rows and columns, you can also take precise control of where you want to place certain elements. CSS Grid allows you to place elements exactly where you want them, even if that means pulling them out of the expected layout flow.
The 6th item is positioned to overlap 2, 3 and 5.
You want better and easier control of setting the spacing between columns and rows. Use grid-gap to set the spacing between rows and columns, without having to worry about grid items not aligning with the start and end lines of the containing grid.
Margins at the start and end of each element. The elements do not line up to the edges of the container. This also goes for top and bottom margins.
Elements are aligned with the borders of the container.
When in Doubt
If you’re really not sure which layout suits the situation best, try building it out using both techniques and evaluate which one seemed the most successful. But before committing time to create the layout twice, consider these things:
Does the layout need to handle dynamic content, and if so: how do you want each piece of dynamic content to behave in the layout? For example, what happens when a text gets really long/short/disappears?
Also, do you foresee the layout changing in the future? If so, perhaps it would be a good idea to make it easy to add another button or more images without breaking the layout.
Depending on your layout and how you want these changes to be handled, it should hopefully make it easier to assess which technique is best suited for the job.
It depends on which one has the superpowers that you need at that moment.
Flexbox vs. CSS Grid — Which is Better?, Layout Land, Mozilla
Jen Simmons’ wise words essentially mean that each of the techniques excels in different areas. Try to figure out which superpower is needed to solve the challenges of your layout.
Combining Flexbox and CSS Grid
Perhaps the most powerful layouts are created when both layout models are allowed to show off their respective strengths. By combining the strengths of each layout model, better layouts can be achieved.
An example is a typical grid with a repeating card layout, where CSS Grid controls the width and placement of each card. The content of every card is controlled by flexbox to be aligned within the card.
Have a look at my article “Magic Cross-Browser CSS Grid” for a more in-depth description of how to set up this layout (including fallbacks for older browsers).
See the Pen Magic Cross Browser CSS Grid by Frida Nyvall (@fridanyvall) on CodePen.
Another example of creative layouts using flexbox and CSS Grid is our contribution to the Smashing Magazine CSS Grid Competition, which awarded us a 2nd place.
Resources
- Flexbox vs. Grid, CSS Grid Course by Wes Bos
- Best Practices With CSS Grid Layout, by Rachel Andrew for Smashing Magazine
- Flexbox vs. CSS Grid — Which is Better? by Jen Simmons for Layout Land, Mozilla
