Flexbox has been a popular CSS layout tool for the past couple of years, and now CSS Grid is catching up. Both provide greater control over your layouts compared to traditional methods such as floats, positioning and tables, but which one should you use?
What is Flexbox?
Flexbox is a one-dimensional layout model that was designed to provide greater control over alignment and space distribution between items within a container. Being one-dimensional, it only deals with layout in a single direction - columns or rows - at a time. This works well for smaller layouts, such as components.
What is CSS Grid?
CSS Grid is a two-dimensional layout system that is aimed towards control of larger layouts, such as whole page layouts. Similar to tables, it allows for items to be aligned in columns and rows. However, CSS Grid is easier to control and provides more layout options than old table-based layouts.
What is the difference between CSS Grid and Flexbox?
There are two key differences between Flexbox and CSS Grid, which will help you decide which is most appropriate to be used for your layout:
- Flexbox is one-dimensional and CSS Grid is two-dimensional.
Because Flexbox deals with a single dimension at a time, it is a great layout model for individual components. It can be confusing because Flexbox can wrap items to a new line, rendering as a multi-dimensional layout, however control is limited to a single dimension.
CSS Grid provides control over columns and rows, making it a perfect candidate for page layouts. Again, it can be confusing because you can create a single-dimension layouts with CSS Grid, however Flexbox is more powerful for these types of layouts because elements can be moved around easier.
- Flexbox is content-first and CSS Grid is layout-first.
Flexbox allows content to control layout on a row-by-row or column-by-column basis. Again, this makes Flexbox ideal for small-scale layouts and components. For example, a common horizontal header pattern may require some items to be left-aligned and other items be right-aligned, which can be easily achieved with Flexbox, and allow for additional items to be easily added.
With CSS Grid, items are placed in cells defined by the grid. The example above could still be achieved, but would require defining specific grid areas for items to be placed in. What if you wanted to add another item? You would need to define another grid area. This is where Flexbox can be more powerful in creating components with dynamic content. CSS Grid is better suited for creating overall layouts where components can be inserted.
What about browser support?
As of writing this, Can I Use shows that all current modern browsers fully support Flexbox, and even Internet Explorer 11 has pretty good support with some quirks. Internet Explorer 10 also supports an older version of Flexbox.
Despite being much newer, CSS Grid has similar browser support in modern browsers. The one major difference is that CSS Grid is not supported in Opera Mini, so that is something to consider if a decent portion of your visitors are using that browser. IE10 and IE11 support an older version, which requires some MS prefixes. I recommend using Autoprefixer to handle the prefixes, when necessary. It’s important to note that CSS Grid support is disabled by default in Autoprefixer because it won’t work for every scenario, so you’ll need to enable that and test your grids.
With browser support for both layout methods being nearly equal, the biggest factors in determining which method is right for the situation should be whether you need a one or two-dimensional layout, and if you want content to have some control over the layout or if the layout should be fixed with content adhering to your grid.
