Reading Time: 5 minutes

The way you display your content on can say a lot about you or your company. Showing content in a nice and clean way is really important. Using CSS layouts like Grid and Flexbox makes it so much efficient than using float or positions properties.

Thinking about which layout to use for your project can really help you save time in the future in refactoring, achieve better results and a better-written CSS code.

In this blog, we will look at the difference between CSS Grid and Flexbox. How they differ from each other in their purpose, when to use what, and also little about how they work under the hood.

Before looking at the differences, I want to make it clear that these differences are no rules, so these points are not to be seen as laws for using which layout to use when. These points, on a broad level help the developer understand the differences between the two and then depending on his/her own project make a better selection of which layout to use.

One-dimension vs Two-dimension

Flexbox is great for making layouts in one dimension. When the goal is to arrange elements in either row or column flex-box makes it simple and does an amazing job. 

When making a layout in 2 dimensions and arrange elements in columns and rows, the Grid is the best.

Flex (1D) vs Grid (2D)

However, Flexbox can also arrange elements in 2D by using the optional wrap property. But that wraps the content to the next line when it overflows but it won’t necessarily be a well-defined column or rows. The content can expand and take its own space depending on how many elements are along with it in that row/column. Grid always arranges elements in well-defined rows and columns.

flex 2d (yello) vs grid 2d (blue))

Likewise, the grid can also be used to make 1-dimensional layouts. The grid can do almost anything that a flexbox can, but its smarter to use flexbox as it makes small one dimensional layouts simpler to create. The CSS will become a bit complex if the grid is used. So its not a hard rule that you only use the grid in 2-D, in some cases, it works better than flex. It all depends on the use case. Let’s look at an example of building a header in both Flexbox and Grid.

header {
    display: flex;
}

header > div:nth-child(3) {
    margin-left: auto;
}

header {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

header > div:nth-child(3) {
    grid-column: 10;
}

So we saw in Grid we first made 10 columns and then assigned a column to the last div, we could not just simply give a margin-left like in Flexbox.

Grid is Layout First vs Flex is  Content First.

In Grid priority is given to the layout first. You will have to define the layout grid first in the parent element before you can start assigning areas to each element.

In Flexbox, we define the size of each cell in the item itself using set flex-grow, flex-shrink, and flex-basis properties.

This might be looking a bit abstract. Let us understand using an example.

In the above header example, we looked at how making the layout flex converted the stacked vertical div tags to horizontal aligned. We just gave the margin-left: auto property and it did the job. We did not pre-defined anything and just left it up to the items themselves of how they arrange.

But the same layout in Grid, we first had to make 10 columns and then assigned the column to the items. Grid forced us to first decide on a layout, we could not just simply give margin-left property.

So, What does this mean? 

This difference between CSS Grid and Flexbox important, it shows that the in grid layout is calculated before the content is loaded whether or not content is in. The gird will always adhere to its layout even is the content will overflow and that causes overlapping of item.

In Flex the layout is calculated after the content is loaded. So the layout is always according to the content and items never overlap. 

Grid has “gap” property 

You might think that this is a trivial thing, why is this a point of discussion even. But, it is very important that gird allows you to give a gap between elements by setting just one property so easily. To achieve the same thing in flexbox is a nightmare, you will have to set margins, paddings nested containers, and still might face issues. So gap property in the Grid comes as a savior. 

Conclusion

COMBINE BOTH!

Using a combination of both layouts the sweet spot that I think. This Blog was not to declare a winner between the two. Neither Gird will obsolete flex-box in the future nor flexbox will always do the job. You will have to use a combination of both the layouts to achieve the best results. The below example will help you understand better.

Grid can be used to make the overall layout of a container containing heterogeneous type elements. Like for example a web page layout having a header, side menu, content area, and footer. Then use flexbox in the header on the menu to kind of make one-directional layouts.  

Checkout more blogs related to web-development:

Html, CSS, and JS as a framework:
https://blog.knoldus.com/html-css-and-js-as-a-framework/

Web-designing using pure CSS
https://blog.knoldus.com/web-designing-using-pure-css/