Stacking grids without media queries | Kevin Powell

A very clever technique of using combinations of flex-basis, asymmetrical flex-grow, or (for Grid) some quirky minmax() magic to generate flexible layout shifts that, in practice, are controlled by their container's size, but do not use media or container queries at all. Useful for sidebars that you want to fall into a stacking context if there isn't enough room, or (and this is very clever) for making grids with a fixed number of columns e.g. a stack unless you can fit exactly three columns of a minimum width, and then it snaps into a grid layout. Super useful!

Explore Other Notes

Newer

Why I'm over GraphQL

An interesting dive into the long-term complications and issues that Matt has come across whilst using GraphQL. From self-professed "hype train member" for the technology to now considering it a […]
  • A very clever technique of using combinations of flex-basis, asymmetrical flex-grow, <strong>or</strong> (for Grid) some quirky minmax() magic to generate flexible layout shifts that, in practice, [&#8230;]
  • Murray Adcock.
Journal permalink