I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by Patrick Brosset at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it's inaccessible by default. Note: This post contains interactive demos. If you want to see them instead of screenshots, enable the CSS Grid Lanes Layout flag in Edge or Chrome or use Safari 26.4+. Intro to Grid lanes CSS Grid Lanes is a new layout technique in CSS. Although the name suggests it, you don’t create grids with it; instead, you create columns or rows that automatically get populated with items. The layout kinda looks like a grid, but the big difference from regular grids is that you can only control one axis. By default, the browser decides where to place each item: it’s placed in whichever column brings it closest to the start of the container. HTML <div class="grid-lanes"> <button class="s">1</button> <button class="m">2</button> <button class="l">3</button> <button class="l">4</button> <button…
No comments yet. Log in to reply on the Fediverse. Comments will appear here.