Flexibility is all well and good. but does it stand up against true grid superiority?
In my projects of late, I've been wrestling with when to use
display: flex
, versus the mightier [[grid]]. While both are powerful tools for layout design , there's a growing sense that grids have taken center stage.
Take responsive layouts. With `flex`, you're often stuck dealing with items wrapping and reordering in unpredictable ways :
. container {display: flex;}. item {flex-grow; // sometimes works/'' but not always ''/width:auto;// or this?max-width?// still unsure!}But switch to a grid, like so:
. grid-container {display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,max-content));}And suddenly the layout is predictable and clean!
Surely there are some cases where `flex` shines - nested flex items for instance. But in most scenarios, grid's row & column structure seems to offer more control over space distribution.
So my question:
when does it make sense not [[grid]]?
Anyone else feeling the pull of grids? Or is
display:flex
's simplicity still winning some battles out there