DEV Community

Cover image for Grid vs Flex: Where to use which? ๐Ÿค”
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated 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

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.

Top comments (10)

Collapse
 
unsungnovelty profile image
Nikhil • Edited

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
 
ivan_jrmc profile image
Ivan Jeremic

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

Collapse
 
benz_marwan profile image
Marwan Benznana

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

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.