Skip to content

Issue 275

Masonry, content-visibility, and hiding things with CSS

Rachel Andrew
1 min read


Issue 275

I'd seen a few people mention the publication of a Grid Level 3 draft spec, which adds the masonry feature, so thought it a good time to write about the spec. You can find that in my list of links today. I'm also documenting it all over at MDN.

I'm not quite sure how it got to be November, however it is, and I'm starting to book in workshops and events for next year. All virtual right now, though I'd love to think we can be doing some in-person stuff in 2021. Anyhow, you can come and workshop with me in February where I'll be doing my CSS Layout Masterclass for Smashing Conf. Speaking of Smashing Conf, we have our last virtual event of the year next week. It's the online version of SmashingConf SF so will be in a good timezone for the USA.

Thinking of all of my US readers as you await your election result.

Rachel Andrew, CSS Layout News

Chrome Canary: dynamic contextual flexbox alignment icons!

Some images in this tweet of flexbox contextual alignment icons in Chrome Canary DevTools.


Native CSS Masonry Layout In CSS Grid — Smashing Magazine

The masonry spec is now part of CSS Grid Level 3. I made some demos and wrote about how it works for Smashing Magazine.

More on content-visibility | CSS-Tricks

More on content-visibility with some thoughts from Chris along with a video explaining more.

Comparing Various Ways to Hide Things in CSS | CSS-Tricks

A great rundown of the different ways to hide things using CSS.

Adactio: Journal—Accessible interactions

Jeremy writes up his thought process when designing an accessible component.