-1

I know this is not a new question but I didn't find a strong debate yet and I would like to hear your opinions.

So, I want to do a simple component with a one direction layout. What should I use: Flexbox or CSS Grid? Why?

Is just a preference or there are pros and cons?

Check this super simple example: https://codepen.io/joaosaro/pen/rRJXOa A container with 3 children: two divs occupying only the content size and one that expands itself the maximum space possible.

.flex-container {
  display: flex;
}
.flex-container .child--max {
  flex: 1;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
João Saro
  • 543
  • 1
  • 7
  • 22
  • 2
    They aren’t synonymous. You shouldn’t equate them to replace one or the other. That’s the first place I would start researching. And of course browser support is always a forefront issue – soulshined Mar 15 '19 at 00:46
  • First, I forgot to mention. Of course, I'm going with "browser support" isn't an issue here but it can be an easy cons to CSS Grid. Second, I'm asking opinions about a simple example. I know they aren't synonymous, I'm just looking to check for this kind of cases is just a preference thing or there are actually pros and cons that I'm not taking in account. – João Saro Mar 15 '19 at 00:55
  • Your question is primarily opinion based anyways. But pros and cons to what? You provided a very specific example that addresses a specific use case. Grid can do things flex can’t and flex can do things grid can’t. They work in harmony as well. Why do you HAVE to choose between them? – soulshined Mar 15 '19 at 00:57
  • Look, you can just answer "both are fine". Is one of the opinions I'm looking too. Cheers ;) – João Saro Mar 15 '19 at 00:59
  • this is not the right place for opinion, it's a place for precise question. anyway, I closed with a duplicate which close to what you are asking – Temani Afif Mar 15 '19 at 01:00
  • There is a fair question in the post but its ok. Sorry, if you didn't find it. – João Saro Mar 15 '19 at 01:02
  • 1
    `What should I use: Flexbox or CSS Grid? Why?` this is your question and the answer cannot be precise because it's opnion based. I can say flexbox and someone else CSS grid and we will start debating why which is off-topic here – Temani Afif Mar 15 '19 at 01:05
  • `Is just a preference or there are pros and cons?` this is another question which is also opinion based, in everyhing we will have pros and cons and this will also lead to a debate – Temani Afif Mar 15 '19 at 01:06
  • Ok, right and it's fair. – João Saro Mar 15 '19 at 01:08

1 Answers1

6

There isn't a strong debate because there is a clear winner:

Use flexbox for one dimensional layouts.

It makes everything so much faster to implement, use, and make it responsive. For one dimensional layouts, using grids is just an absolute overkill.

  • Thanks for your input. And there is a good point to keep it simple: "1 dimensional, use flex, 2 dimensional use grid". But why do you think is overkill with grid? I don't find it at all. – João Saro Mar 15 '19 at 00:57
  • 1
    I think it's overkill because it's more steps to consider, and you're trying to "decompress" a natural 2 dimensional layout to fit into 1 dimensional. Why do that, when there already is a perfect solution for 1 dimensions? Which is flexbox! If this answered your question, please mark it as the answer :) –  Mar 15 '19 at 01:01