Brand New Layouts with CSS Subgrid

Summary

IntroductionWhen CSS Grid layout was first released, it came with a big asterisk: only the grid’s direct children could participate in the layout. “Subgrid” is a newer addition to CSS Grid which allows us to extend the grid layout down through the DOM tree. When I first heard about subgrid, it seemed to me like a convenience, a way to make it a bit simpler to accomplish the same stuff I was already doing. As it turns out, subgrid is way more interesting than that. It opens whole new doors in terms of the UIs we can build! In this tutorial, I’ll show you some of the exciting new things we can do with subgrid. Along the way, you’ll learn the basic mechanics of subgrid. We’ll even go over the most common gotchas! Credit to Kevin PowellIn preparation for this tutorial, I looked at a lot of subgrid resources, to try to see what sorts of things people were building with subgrid. The best examples I found, by far, are from YouTube superstar (and fellow Canadian!) Kevin Powell(opens in new tab). Specifically, these videos helped shape the examples we cover in this post: We’ll get to the interesting stuff soon, but first, let’s start with the basics. Suppose we want to implement the following mockup: We can create this layout using a flat grid, no subgrid required. Here’s a quick implementation: <style> .grid { display: grid; grid-template-columns: 35% 1fr 1fr 1fr; header { grid-row: 1 / 3; } } </style> <div class="grid"> <header> <h1>My Portfolio</h1> <p> A small selection of the works created using Blender. No robots or AI involved. </p> <p> In a real artist portfolio, there would be more text here. </p> </header> <img alt="…" src="/img/thumb-sneakers.jpg" /> <img alt="…" src="/img/thumb-rocket.jpg" /> <img alt="…" src="/img/thumb-fish.jpg" /> <img alt="…" src="/img/thumb-guitar-pedals.jpg" /> <img alt="…" src="/img/thumb-machine.jpg" /> <img alt="…" src="/img/thumb-particles.jpg" /> </div> Not a responsive layoutTo keep things as simple as possible, this layout is not res...