Brand New Layouts with CSS Subgrid CSS Subgrid is a newer feature of CSS Grid that allows a grid layout to be extended through nested elements in the DOM tree, enabling child elements that are not direct children of the original grid container to participate in the grid layout. This solves a limitation of the original CSS Grid, where only direct children could be grid items, and improves semantic HTML by allowing elements like list items to align with the parent grid. The article explains the fundamentals of subgrid, including how to use it to create complex layouts while maintaining proper markup. 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 Link to this heading the-fundamentals-1 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: If we check the “Grid” devtools, we see that this is a 4x2 grid, with the header spanning the first two rows: In order for this to work without subgrid, every grid participant has to be a direct child of the .grid container. Sure enough, if we inspect the HTML, we see the following structure: