Responsive grid vs flexbox?

[CrockAlley]

I’m trying to get a better handle on grid and flexbox.

I’m taking a look at this article: Look Ma, No Media Queries! Responsive Layouts Using CSS Grid.

It seems to me that by using grid, auto-fit, we’re treating grid very similarly to flexbox (wrap and flex-grow).

Codepen example

It seems that by using auto-fit, grid is essentially becoming one-dimensional. To my amateur eyes, most of the examples given in the article “Look Ma…” can be accomplished with flexbox (except for the one that uses grid-auto-flow: dense;). So, why is grid preferable in these examples?

[Paulie_D]

For many layouts flexbox requires additional wrapping elements where css-grid does not which leads, often, to cleaner lower maintenance HTML.

Frankly, as long as you understand the feature, possibilities and limitations of both layout methods it’s not a question. You use whichever fits your requirements the best.

There’s no reason to prefer on over the other unless one of them can’t do what you want.

[CrockAlley]

Thanks for the reply. That all makes sense.

[Author]

Posts