Grid vs Flex: Where to use which? 🤔

Perhaps you are a beginner to CSS and wondering if you should use flex or grid for your layout, or perhaps you have heard the popular statement saying to use flex for 1D layout and grid for 2D layout, you have come to the right place.

This article will show you the difference between flex and grid and when to use which, so you can confidently use the suitable one for your project!

Debunking myths 🎈📌

Let's start by debunking the common myth about flex and grid being limited to 1D & 2D layouts.

We would be using the following as base HTML:

<div class="container">
  <div>
    Lorem, ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur.
  </div>
  <div>
    Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Facilis.
  </div>
  <div>
    Lorem ipsum dolor sit amet.
  </div>
  <div>
    Lorem ipsum dolor sit, amet consectetur
    adipisicing elit.
  </div>
  <div>
    Lorem, ipsum dolor.
  </div>
</div>

And add the following CSS to make the bounds of the elements visible:

.container {
  border: 1px solid #000;
}

.container > div {
  border: 1px solid #000;
}

This is what we get:

2D Layout with Flex

On adding display: flex to the CSS

.container {
  display: flex;
}

The elements align themselves in a row.

Plugging in one more property to the CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

The elements that cannot be fitted in the first line jump to the next line & the myth that flex can be used for 1D layout only goes down the drain.

1D Layout with Grid

Even though adding display: grid to the CSS, changes nothing,

.container {
  display: grid;
}

As soon as we add grid-auto-flow: column, the elements align themselves in a row.

And we have debunked this myth too!

So when should you actually use flex or grid? 🤨

CSS grid focuses on precise content placement. Each item is a grid cell, lined up along both horizontal and vertical axis. If you want to accurately control the position of items within a layout, CSS grid is the way to go.

Whereas, flexbox focuses on content flow rather than content placement. Widths (or heights) of flex items are determined by the content of the item. Flex items grow and shrink according to their inner content and the available space.

With the flex-wrap, you might have noticed that the elements only take up as much space as they require.

That is not the case for the grid. On adding the following CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

We find that all the elements have the same width, regardless of their content. They also share the same height as all the elements in the particular row.

Use Cases 🎬

Flexbox

The ideal use case for flexbox would be when you want to display items without taking up equal space, like in a navbar.

Grid

grid can be used to display items like cards, where each element should have equal spacing.

It can also be used to create masonry layouts, where the items are laid out in a grid, but the items expand beyond a single row/column, which can be done by adding a few CSS properties to the child elements:

.grid-parent .child-2-by-2-tile {
  grid-column: span 2;
  grid-row: span 2;
}

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

Follow me on Instagram to check out what I am up to recently.

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

1. I am a beginner, how should I learn Front-End Web Dev?
   Look into the following articles:

   1. Front End Development Roadmap
   2. Front End Project Ideas

2. Would you mentor me?
   
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Comments

[Nikhil]

Another pro tip is that you can mix CSS Grid with Flexbox and vice versa. There is no need to stick to one. I don't see this mentioned enough. I don't know if this is because it is a given or if this is because this is one of those things you only eventually realise as you work with CSS.

[Wilmela]

Well said man. Just use any one that solves the problem at hand easily.

[Pramesh Bajracharya]

Exactly!! I second this.

[Thomas Bnt]

Both for me are very useful. Flex for some elements, and Grid for elements like you presented.

I don't even make a VS between them, because both are useful. 🚀

[Ivan Jeremic]

You need both this flex vs grid discussions get annoying people need to get educated about this.

[Marwan Benznana]

I like to us Flex for easy stuff like section with two sides or navbare,
Grid for complex system.

[Andrew Baisden]

In summary, they both excel in different areas and can be used together if you want.

[ali]

good luck