Solving “The Dangler” Conundrum with Container Queries and :has() - daverupert.com
The algorithm I’m going after is pretty simple: If the grid of items has an odd number of items, then make the first item full-width. But CSS can’t do logic… right? Well… hold my proverbial beer.
Related links
Help us choose the final syntax for Masonry in CSS | WebKit
I really like the way that the thinking here is tied back to Bert Bos’s original design principles for CSS.
This is a deep dive into the future of CSS layout—make a cup of tea and settle in for some good nerdiness!
An alternative proposal for CSS masonry | Blog | Chrome for Developers
Rachel responds to Jen’s recent post with the counter-argument; why masonry should be separate from grid.
I’m not entirely convinced. We heard performance issues as a reason why we could never have container queries or :has, but here we are. And the syntax for a separate masonry spec borrows so heavily from grid that it smells of redundancy.
Help us invent CSS Grid Level 3, aka “Masonry” layout | WebKit
This is a wonderful in-depth article by Jen, with lots of great demos.
She makes a very strong case for masonry layouts being part of the grid spec (I’m convinced!). If you have strong feelings one way or the other, get involved
An Interactive Guide to CSS Grid
This is a terrific interactive explainer!
Related posts
content-visibility in Safari
Safari 18 supports `content-visibility: auto` …but there’s a very niche little bug in the implementation.
Schooltijd
Going back to school in Amsterdam.
Speedier tunes
Improving performance with containment.
Declarative design
Defining the inputs instead of trying to control the outputs.
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.