CSS Grid vs. Flexbox: What is the Difference and When Do I Use Them?

In recent years, CSS Grid & Flexbox have risen in popularity when it comes to front end development. Grid & Flexbox are CSS layout modules that allow the creation of complex layouts, previously only possible with a combination of CSS & Javascript, with just straight CSS. Though very similar, there are a few distinct differences between the two and with widespread support across all major modern browsers, it is worth knowing, as a developer, the differences between Grid & Flexbox and when it is beneficial to use either.

The primary difference between CSS Grid & Flexbox is that Grid gives the developer the ability to create a two dimensional layout, defining both columns AND rows, while Flexbox only allows for one dimensional layouts. Utilizing Grid is very similar to using an HTML table except without the need for the HTML markup. In order to implement a Grid layout, you must declare the grid’s container element by setting the display property to grid. From there, you will also need to establish the grid’s columns by setting the grid-template-columns property on the grid container. Grid will implicitly create rows when the layout calls for it, or you can explicitly create your rows with the grid-template-rows property. Grid grants the developer the ability to specify the orders, direction, and alignment of each element along both the X & Y-axis regardless of each element’s placement in the semantic HTML. Additionally, you can set the column & row gap between each element. This is the spacing between each element on the X & Y axis. 

With Flexbox however, you are only able to create one dimensional layouts. Similar to Grid, you must declare a flex container element by setting the display property to flex. That is it. The flex container’s children elements will all be sized to fit inside of the container, unless otherwise specified. You may specify the alignment and order of each element but only along the X-axis. You are able to set the row and column gaps however despite the restriction to the X-axis.

So when do I use Grid? When do I use Flexbox? - Developer Insights 

Once you have learned the capabilities and limitations of each you will begin to see the uses for each. Generally speaking, Grid is used when there is a more rigid structure desired and Flexbox is used for alignment and more fluid layouts. 

As a developer myself, I have worked extensively with both Grid & Flexbox and I will tell you that, while both can typically be used interchangeably, one is better than the other depending on what goal you are trying to achieve. 

I typically utilize Grid for setting up page layouts. For example, a page with a sidebar, I will set up a grid container that sets up the whole body of the page to have a 1/3 width sidebar with a 2/3 width body content container. From there I can control the spacing between the sidebar and the body content utilizing the gap properties associated with Grid. 

Flexbox is something I lean on heavily for vertical alignment. Before Flexbox, getting something to align vertically was a huge pain. Whether it be setting a static height on elements, utilizing line-height, or using position: absolute and the position properties (top, right, bottom, left). But now with Flexbox, it is as simple as setting align-items: center on your Flexbox container and viola! Your content is now vertically aligned.

The differences between CSS Grid & Flexbox are subtle but very important and it would be unwise to suggest that you should only ever use one or the other. With widespread browser support and popularity, these are powerful tools that every modern developer should have in their toolbox. When used properly, together they can help you create beautiful, complex, responsive website layouts.