Issue 275
Masonry, content-visibility, and hiding things with CSS
News
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.
Learn
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.