-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
  • 533
  • 1
  • 7
  • 21
  • 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

3

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.

sosa067
  • 57
  • 4
  • 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 :) – sosa067 Mar 15 '19 at 01:01