Issue 344
A new home and new start for CSS Layout News
've been wanting to revive CSS Layout News for a while, and the possibility of a new home on the ATmosphere gave me the push I needed, so here we are. Read CSS Layout News in the ATmosphere on my blog to find out about the solution I chose, and why I decided to start over with my list. That last part is important, I unsubscribed everyone (including hundreds of spam accounts) from the previous system. If you want this in email, sign up here. You can also follow along on Bluesky or any other atproto social media app.
On with the CSS news!
In this issue, I've a collection of posts about some of the newest CSS Layout features, many of which are not yet Baseline Newly available. With the call for proposals for Interop 2027 open, it would be a great time to nominate them for the 2027 project.
Multiple column layout, rows, rules, and floats
My post about the new feature for multiple-column layout that lets you wrap columns into rows, and the new gap decorations feature proving a way to add a rule between those rows. I share some other potential features of multiple-column layout, as I'm keen to find out if these are interesting to anyone other than me!
Let's play with gap decorations!
A walkthrough of the new gap decorations for grid, flex, and multicol layouts. Posted on master.dev by Temani Afif.
CSS is filling the gaps with rules. A way to style gaps in grid and flex.
Another post on gap decorations. This is a detailed exploration of the new feature, along with plenty of demos from Brecht De Ruyte.
Your Grid Lanes will likely fail WCAG 2.4.3
Manuel Matuzović writes about the potential accessibility issues caused by grid lanes (the layout technique formerly known as masonry). I agree with his concerns and wish that grid lanes had shipped about with reading flow controls. Support for masonry type layouts has been long requested by developers, and I hope that this problematic issue can be resolved before it ships in other browsers.
Balancing flex items with flex-wrap balance
Ahmad Shadeed shows you how to use the new balance value for flex-wrap. I'm excited to see this shipping. It's already in Chrome (from 150), is coming to Firefox and WebKit.
Get Grid information using pure CSS
A clever way to achieve things like highlighting all cells in a row, from Temani Afif.
Modernist Tiles with CSS Grid
Wrapping up with something fun from Carmen Ansio. Use CSS grid to create modernist hydraulic tile floor patterns.
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.