Hacker News new | ask | show | jobs
by pitaj 3365 days ago
tl;dr: no

CSS Grid is a two-dimensional layout mechanism. CSS Flexbox only handles a single dimension.

3 comments

You'd be forgiven for thinking, logically, that something which works in two dimensions would do everything that something which only works in one dimension would do. Unless the two, in fact, were intended for entirely different purposes, in which case the dimensions would be irrelevant.

I'm not sure the process which has resulted in both CSS Grid and Flexbox was really much grounded in logic (or common sense), though.

That doesn't summarize the article:

>it's not impossible to make multi-dimensional layouts in just Flexbox

Both are 2D layout mechanisms. You can make Grid act like Flexbox and vice-versa but they have different strengths, and are best used in tandem.

Rachel Andrew has added a very illuminating comments to the article which, I think, highlights why Flexbox can't do what Grid does:-

“Potentially Confusing: a “2D” Layout with Flexbox” – that isn’t a 2d layout. It’s a wrapped flex layout. As soon as you want to make that final box line up with the boxes in the first column you realise what you have isn’t two-dimensional.

Flex wrapping doesn’t make it two dimensional. Each row (in your example) is a flex container itself, space distribution happens across each row individually. Which is why it isn’t two-dimensional.

More here https://rachelandrew.co.uk/archives/2017/03/31/grid-is-all-a...

You can also space grid tracks out evenly and so on, box alignment is shared by both the flexbox and grid specifications. For examples of that see http://gridbyexample.com/video/align-grid/

Betteridge's Law in full effect.