Grid by Example

We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.

Tagged with

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!

Tagged with

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.

Tagged with

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

Tagged with

An Interactive Guide to CSS Container Queries

Another terrific interactive tutorial from Ahmad, this time on container queries.

Tagged with

Getting started with CSS container queries | MDN Blog

Michelle has written a detailed practical guide to container queries here.

Tagged with

Related posts

Making Things Better: Redefining the Technical Possibilities of CSS by Rachel Andrew

A presentation at An Event Apart Seattle 2019.

New tools for art direction on the web

Variable fonts + CSS grid + service workers

Good griddance

How CSS grid is making my life easier.

Everything You Know About Web Design Just Changed by Jen Simmons

A presentation at An Event Apart Seattle 2018.

Fit For Purpose: Making Sense of the New CSS by Eric Meyer

A presentation at An Event Apart Seattle 2018.