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!
- Source
- Link to Original 🔗
- Published
- Categories
- HTML & CSS, Frontend
- Tags
- CSS Grid, Flexbox, flex-basis, fluid design
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 …
Older ➡
Generative AI is for the idea guys
A wonderfully concise look into why the current round of "AI" hype doesn't quite seem to get the point, and likely won't amount to anything close to what the headline's …
- <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>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, …</p> </body> </html>
- Murray Champernowne
