DEV Community

Back to Basic: Should we use Flexbox or Grid?

Theodorus Clarence on May 28, 2021

Back to Basic will answer some of my questions when I first started learning CSS. Personally, I think when you start learning CSS, it will be very ...

Read full post

Arvind Padmanabhan • May 28 '21

The one-line summary says it all! Nice examples to highlight the differences. I would like to quote from devopedia.org/css-grid-layout :
"CSS Grid doesn't replace Flexbox. Grid items can be flex parents and vice versa."

Theodorus Clarence • May 28 '21

Thanks for your addition!

Ivan Jeremic • May 28 '21

It does

Ihor Vorotnov • May 28 '21 • Edited

Your example #2 (divide page into parts) won't work in Safari. There's no need to hack around with 100% width, there ape specific flexbox properties for that - flex-grow and/or flex-basis:

.content {
  width: 50%;
  flex-grow: 1;
}

.content {
  width: 50%;
  flex-basis: 50%;
}

Also, this is actually the case when grid would be better / simpler / easier:

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 50% 50%;
}

Theodorus Clarence • May 29 '21 • Edited

Thanks for your addition! I edited the post!
It turns out that using flex-basis won't work with images. But it is fine on other tags

Lyrod • May 30 '21

Why not "grid-template-columns: 1fr 1fr"? This will produce the same right?

Theodorus Clarence • May 30 '21

Correct, I usually use fraction unit too.

Daniel Rodríguez Rivero • May 29 '21

Will be nice if you explain what:

  grid-column: 1 / 3;
  grid-row: 1 / 3;

means.
One third? Nope. One column and three rows? nope. One ror and three columns? nope.
It is not intuitive to mw

Lars Ejaas • May 30 '21

I think a lot of people struggle with grid untill you realize that you are not positioning items in terms of colum- and row-areas, but instead lines.
Lets say we draw 3 colums. That gives us 4 vertical lines. So if the container needs to fill out the 3 AREAS you need to write:
grid-column: 1/4; This means that you start at line 1 and end at line 4.

Daniel Rodríguez Rivero • May 31 '21

Oh my god! Thank you.
That totally make it click for me.
Thanks

Lars Ejaas • May 31 '21

Your' welcome 😊👍

Theodorus Clarence • May 29 '21

Check this if you have not understand the grid numbering system.

You can look it up at the link that I referred, after that with the numbering illustration I put up, it should be intuitive enough! Good luck 🚀

Keerthi • May 29 '21

Nice article ...in short Use flex for one dimensionl group of things ie things that need to be placed in a row only, or things that need to be placed column only. ie nav bar = things in a row. With flex you cannot control both row and column.

Use CSS grid for 2 dimensional placement where you want to cotrol the row and column placements. ie the complex layouts of a website.

In flex box you can acheive many things that CSS grid can do, but you have to start nesting containers, which ends up over complicating.

Theodorus Clarence • May 29 '21

Great recap!

Kinanee Samson • May 28 '21

Grid and Flex box actually goes well together, but grid is simpler and removes a lot of unnecessary code

Matyi Csorba • May 29 '21

Thank you!
*insert Thank you! meme
;)

Thomas Ledoux • Jun 1 '21 • Edited

Great article!
Note that the gap property can also be used to add spacing between your elements in a flexbox layout: caniuse.com/flexbox-gap.
It is supported by all major browsers by now :-)

Theodorus Clarence • Jun 1 '21

Thanks for your addition. Yep, finally ios & safari is supported, we can start using it now, no more .flex > * + * 😬

Eric A. Kumah • Jun 2 '21

With those tiny bits of rows and columns? Wow, Grid says divide and conquer! Adjust in order to fit into any tiny bit of space available; Flexboxes even admit they would employ the services of a grid if necessary! Flexbox has the ability to line things up in one dimension (horizontal) but hey, grids with their rows and columns do the same in 2-dimensions! Rows x Columns.. capable of adjusting based on what's going into the grid.

Ivan Jeremic • May 28 '21

I do everything with grid, it is less code and who cares about IE.

Theodorus Clarence • May 28 '21

Nice! I think with grid-auto-flow it can easily replace flexbox now, it is also easier to understand grid than flexbox.

Ivan Jeremic • May 28 '21

Yes grid makes just more sense and you can picture it in your head

Eli H. Schei • May 29 '21

Great overview!

Natalia Asteria • May 28 '21

I love how the text in the "Divide page into parts" codepen is "Hello Bambang".

Prithvi • Jun 2 '21

But personally, I found mix of Grid + Flexbox more customizable and handy than either of them alone.

Aleksei Berezkin • May 28 '21

Thanks for sharing! What's with grid in older browsers? I'm not about IE, rather about old Androids from like 2016 or 18

Theodorus Clarence • May 29 '21

Hey, I don’t really know about old androids, but you can check compatibility on this website. On IE there are some features like the gap property that are not supported yet.

alex ➡️ web dev journey 👩🏽‍💻🔍 • May 28 '21

I love this, especially the case-by-case scenario made it much easier to visualize!

Theodorus Clarence • May 28 '21

Thanks! I tried to summarize all the things such as illustrations, code examples that made me understand when I start learning this topic, and write this blog to help others out!

Nirmal Patel • May 30 '21

I'm not a css hardcore user, although I would prefer Flexbox, it's really flexible and easy when you get used to it.

Theodorus Clarence • Jun 1 '21

I also love flexbox! Really powerful especially the justify-content property.

Tom Gooden✨ • May 29 '21

Both…