Masonry layouts have been a pain for 15 years. You know the drill: Pinterest-style galleries where items stack nicely without giant gaps. We’ve been using JavaScript libraries, writing complex calculations, and biggest of all, dealing with performance issues. Well, not anymore. CSS Grid-Lanes solves all of this with three lines of code. No JavaScript, no libraries, just CSS doing what it should’ve been doing all along. As always, here is the practical implementation of CSS Grin-Lanes

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid unlocks exciting new layout possibilities, stuff we couldn’t do until now. ✨

A Practical Guide to CSS Grid Layout With Real-World Examples You Can Use Right Away