Introduction
When 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!
Intended audience This blog post assumes that you understand the basics of CSS Grid layout. If you’re not super comfortable with grid, you can learn the fundamentals here: An Interactive Guide to CSS Grid
Link to this heading The fundamentals
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:
Code Playground Reset Code Show line numbers Format code using Prettier Open in CodeSandbox index.html styles.css < style > .grid { display : grid ; grid-template-columns : 35 % 1 fr 1 fr 1 fr ; header { grid-row : 1 / 3 ; } } < div class = "grid" > < header > < h1 > My Portfolio < p > A small selection of the works created using Blender. No robots or AI involved. < p > In a real artist portfolio, there would be more text here. < 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" /> result console Refresh results pane
... continue reading