DEV Community

Cover image for Grid vs Flex: Where to use which? 🤔
Tapajyoti Bose
Tapajyoti Bose

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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

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

.container > div {
  border: 1px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

This is what we get:

starting-point

2D Layout with Flex

On adding display: flex to the CSS

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

The elements align themselves in a row.

flex

Plugging in one more property to the CSS

.container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

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.

flex-wrap

1D Layout with Grid

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

.container {
  display: grid;
}
Enter fullscreen mode Exit fullscreen mode

starting-point

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

grid-row

And we have debunked this myth too!

yay

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.

flex-wrap

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

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

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.

grid-wrap

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.

navigation

Grid

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

cards

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;
}
Enter fullscreen mode Exit fullscreen mode

masonry-grid

Research says, writing down your goals on pen & paper makes you 21% to 39% more likely to achieve them. Check out these notebooks and journals to make the journey of achieving your dreams easier: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

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.

Discussion (9)

Collapse
unsungnovelty profile image
Nikhil • Edited on

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.

Collapse
wilmela profile image
Wilmela

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

Collapse
prameshbajra profile image
Pramesh Bajracharya

Exactly!! I second this.

Collapse
thomasbnt profile image
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. 🚀

Collapse
ivanjeremic profile image
Ivan Jeremic

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

Collapse
andrewbaisden profile image
Andrew Baisden

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

Collapse
alidarrudi profile image
ali

good luck

Collapse
banesto profile image
Ernests Kečko • Edited on

I am sorry, but it's really funny how you debunk a "flex for 1D layout and grid for 2D layout" myth and then present examples to confirm said "myth". If you ask me, it's a rule of thumb not a myth. The fact that flex can span over two lines when not enough space does not mean it's 2D, same as grid consisting of one row does not mean it's 1D.

It's like debunking "car is for driving, plane is for flying" myth by saying that car can fly off the ramp & plane is certainly driving on a runway.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Perhaps I should have added details, but you can even style how the items are displayed in multiple lines using align-content. For details check out: dev.to/ruppysuppy/flexbox-decoded-...