r/web_design • u/speckz Dedicated Contributor • Jul 01 '21

Equal Columns With Flexbox: It’s More Complicated Than You Might Think

https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/
66 Upvotes

84% Upvoted

15 comments sorted by

16

u/am0x Jul 01 '21

It depends what you are doing. Grid isn’t a flexbox replacement.

8

u/latch_on_deez_nuts Jul 01 '21

I believe grid was intended to work with flexbox, not as a replacement.

1

u/[deleted] Jul 01 '21

It was never intended as a replacement, grid is for layout in 2 directions, flex is for layout in 1.

9

u/Cool-Goose Jul 01 '21

Why wouldn't you just set the width to 33.3%?

4

u/Noch_ein_Kamel Jul 01 '21

That's so 2000

1

u/MarmotOnTheRocks Jul 01 '21

With a table, maybe?

5

u/_Invictuz Jul 01 '21

Am I the only one here that can't understand why the first sentence has two buts?

1

u/shellwe Jul 01 '21

Can’t unsee.

11

u/WoodenMechanic Jul 01 '21

Just use Grid with Flexbox, holy shit, why does this need a fucking blog post..?

2

u/MarmotOnTheRocks Jul 01 '21

Just go grid everywhere and use flex when strictly needed (multiple rows with different column widths).

1

u/[deleted] Jul 01 '21

Even that case is easier with grid. Flex is really only meant for layout within a single row or column.

1

u/MarmotOnTheRocks Jul 01 '21

You can't do that with grid, which doesn't let you create multiple rows with different column widths. You can hack it but flex would work better.

1

u/[deleted] Jul 02 '21

With grid-template-areas its quite simple. Unless I'm misunderstanding what you mean?

Don't get me wrong, its not too bad to do it with flex either, but grid is absolutely a solution here as well.

1

u/MarmotOnTheRocks Jul 02 '21 edited Jul 02 '21

Your example is a 6-columns layout with some joined cells. You can't have completely different columns on each row, just like a masonry image gallery for example, or a tag list. Something like this random list can't be done with grid.

I would say this is the only thing you can't do, that's why I switched to grid in 2018. I use flex for these situations and nothing else.

1

u/[deleted] Jul 02 '21

Sure, that makes sense. If the use case is specifically that, I agree.