Both grid and flexbox – we use them for a layout – both can shrink and they can stretch, we can align and reorder elements with them. Both grid and flexbox have similarities, but most of all they have differences too and in this article, we will focus on that. We will put grid versus flexbox and we will explore how they are different (and similar) and when should we use each to find the optimal balance – the right tool for the right job.
Before flex and grid came around we were hacking our ways in things that we do. Flexbox was first published in 2009 and now, more than a decade later, it is supported on practically all browsers. If you would like to know more about flexbox, you should read Flexbox tutorial: a quick guide to flex container and flex items properties and values
And the same is with the grid, although some features do not work in all browsers (we’re talking about a subgrid that is supported only by Mozzila). Now, let’s take a look at both, grid and flexbox, and see how they are similar and how they are different.
Grid as “two dimensional” vs Flexbox as “one dimensional” offers better control over element positioning
To clear something at the very beginning – you can use the grid in one-dimensional situations, so don’t hook on the flexbox exclusively because you might have only one dimension to work with. This “dimensional” differentiation is often brought up because Flexbox is great in aligning elements along a baseline, which is something you cannot do very well with a grid.
So, with flexbox, you can make rows and columns, but you can only lay items in one direction. You can either expand vertically or horizontally – you have to choose one dimension with flex-direction: column / row. Consequently, by laying items along the baseline, these items will end up wrapping to the next row or column.
This wrapping, however, is just a side effect of not having enough space in that one dimension. So, the biggest problem with flexbox lays in the fact that it is very hard to control where elements end up with wrapping. This is because elements push along one axis and then they wrap or do not wrap the way we want.
We declare the exact size of rows and columns with a grid and then we place elements exactly where we want. When compared with flexbox, we do have better control of elements positioning with grid because we can expand on both x and y-axis, and to put it simply, we can create more complex layouts.
Grid is defined on the parent vs flexbox relies on the children
With the grid layout – the majority is defined on the parent element. Yes, you can find some placement information on grid children, such as grid-row and grid-column, but the majority of defined properties stay on the parent. With the flexbox, on the other hand, most of the layout is defined on the children – flexbox is more rigid and has its logic is expanded across its children nodes.
Overlapping with grid vs flexbox
We can easily break out of the grid with overlapping grid items, so yes, the grid layout is a much better option if you want your items to overlap – we can place items on overlapping grid lines, or even right within the same grid cells.
If we want to achieve overlapping, flexbox, on the other hand, would not be a healthy choice. Overlapping is possible, but we would have to break out of the flexbox behavior – we would have to take care of negative margins, transforms, and absolute positioning, which is much more complicated compared to positioning the grid items.
So, when should we use flexbox?
One of the best tools for aligning content along one axis is flexbox
That’s it. If you want to align elements in one direction, a column or a row, flexbox will be your best friend. Flexbox is super handy for aligning buttons with icons, text with icons, and all that has to do with alignment. When you want to center items or when you want to justify content, when you want to evenly space it. Align it any way you want. display: flex and align-items property and we’re ready to align. Again, flexbox is the alfa and omega of aligning – even when the complexity of one-dimensional positioning items gets high.
When you want to push things away, use flexbox
That feature, or more of a hack, is quite unique. If you want to push things away, put margin-right: auto; on an element and, if there is enough room, that element will push everything else as far away as it can.
So, when should we use grid?
Grid definitely shines when you want to define a gap between elements
Grid offers three different properties for defining gaps (row-gap for rows, column-gap for columns and gap for both), so with very simple CSS, you can achieve rather complex spacing. If you want to achieve the same gaps in flexbox it would demand using negative margins and some additional work on padding. Although flexbox added the gap feature, its support is still not fully covered. Therefore, use grid, when you need to define a gap between elements.
Grid enables items with a min-width to snap to the column size
Grid enables items to have a minimum and a maximum size – that way we can make our items grow to fill the gaps or wrap them to the next row if they are less than defined with a minimum size. When reading a code, you will notice that minmax() and repeat() functions are inevitable in this situation, so if you want to read more about the repeat() function, check this article and we covered the minimax() function in this one.
Yes, flexbox can wrap the items on multiple columns, but what we cannot do in flexbox is define a minimum and maximum width of a column, so with flexbox our control of positioning is not absolute.
Grid is the choice for complex multidimensional layouts
If you want to create a complex layout, you should definitely be using Grid. There are many ways you can achieve a complex layout and using grid-template-areas, or some other approach, is definitely one of them.
With grid it is easier to achieve responsive layout
All the layout information is located in the Grid container – in the parent – so, just by adding a media query, it is quite easy to remodel the layout so it adapts to the different screen sizes. On the other hand, grid has its own fr unit that is flexible according to the user’s viewport, so it’s a way to go when wanting to achieve a responsive layout. You can read more about the ft unit and the CSS layout in this article.
Hopefully, the subgrid will soon come into play and empower the children with the parent’s layout positioning
At the moment, both, grid and flex only work on first-level children, but the second-level children do not have any benefits of the parent layout. The second-level children demand defining properties again. However, a “new” feature in a grid, called the subgrid saves the day – the children are given the parent’s layout positioning which means less work we have to deal with. However, the subgrid feature is still not well supported. if you are interested, you can read more about subgrid vs nested grid in this article.
Grid is sturdier
One of the best things grid inventors came up with is fractional units. The sizing becomes a piece of cake with them. The way items get sized in flexbox is much more complicated – we have to think of width, min-width, max-width, flex-basis, flex-grow, and flex-shrink, white space, the content, and other items in the same row. The fr unit enables us with less coding to achieve the same layout and promotes a responsive layout.