CSS subgrid is super good – David Bushell – Web Dev (UK)
CSS subgrid is super good
Subscribe
Blog RSS feed
Notes RSS feed<br>or
Combined RSS feed<br>and follow
Mastodon
Bluesky
Thursday
2 Apr<br>2026
.Prose" hidden>Play Synthesised Audio
I’m all aboard the CSS subgrid train. Now I’m seeing subgrid everywhere. Seriously, what was I doing before subgrid? I feel like I was bashing rocks together.<br>Consider the follower HTML:<br>main><br>p>I am main content.p><br>main>Copy CodeThe content could be simple headings and paragraphs.<br>It could also be complex HTML patterns from a Content Management System (CMS) like the WordPress block editor, or ACF flexible content (a personal favourite).<br>Typically when working with CMS output, the main content will be restricted to a maximum width for readable line lengths. We could use a CSS grid to achieve such a layout. Below is a visual example using the Chromium dev tools to highlight grid lines.<br>AltGrid lines marked one through six with a centred paragraph.<br>This example uses five columns with no gap resulting in six grid lines.<br>main {<br>display: grid;<br>grid-template-columns:<br>auto<br>30px<br>min(45rem, calc(100% - 60px))<br>30px<br>auto;
:where(&) > * {<br>grid-column: 3 / 4;<br>}Copy CodeThe two outer most columns are auto meaning they can expand to fill space or collapse to zero-width. The two inner columns are 30px which act as a margin. The centre column is the smallest or two values; either 45rem, or the full viewport width (minus the margins).<br>Counting grid line correctly requires embarrassing finger math and pointing at the screen. Thankfully we can name the lines.<br>main {<br>display: grid;<br>grid-template-columns:<br>[inline-start]<br>auto<br>[margin-start]<br>30px<br>[main-start]<br>min(45rem, calc(100% - 60px))<br>[main-end]<br>30px<br>[margin-end]<br>auto<br>[inline-end];
:where(&) > * {<br>grid-column: main;<br>}Copy CodeI set a default column of main for all child elements.<br>Of course, we could have done this the old fashioned way. Something like:<br>main {<br>margin-inline: auto;<br>max-inline-size: 45rem;<br>padding-inline: 30px;<br>}Copy CodeBut grid has so much more potential to unlock!<br>What if a fancy CMS wraps a paragraph in a block with the class full-width.<br>main><br>p>I am main content.p><br>div class="full-width"><br>p>I am subgrid.p><br>div><br>main>Copy CodeThis block is expected to magically extend a background to the full-width of the viewport like the example below.<br>AltTwo paragraphs. The second has white text with a red background extending to the edge of the viewport.<br>This used to be a nightmare to code but with CSS subgrid it’s a piece of cake.<br>.full-width {<br>display: grid;<br>grid-column: inline;<br>grid-template-columns: subgrid;
:where(&) > * {<br>grid-column: main;<br>}Copy CodeWe break out of the main column by changing the grid-column to inline — that’s the name I chose for the outer most grid lines. We then inherit the parent grid using the subgrid template. Finally, the nested children are moved back to the main column.<br>The :where selector keeps specificity low. This allows a single class to override the default column. CSS subgrid isn’t restricted to one level. We could keep nesting full-width blocks inside each other and they would all break containment.<br>If we wanted to create a “boxed” style we can simply change the grid-column to margin instead of inline. This is why I put the margins inside.<br>AltTwo paragraphs. The second now has a background that does not extend.<br>In hindsight my grid line names are probably confusing, but I don’t have time to edit the examples so go paint your own bikeshed :)<br>On smaller viewports below 45rem the outer most columns collapse to zero-width and the “boxed” style looks exactly like the full-width style.<br>More columns<br>This approach is not restricted to one centred column. See my CodePen example and the screenshot below. I split the main content in half to achieve a two-column block where the text edge still aligns, but the image covers the available space.<br>AltContent layout with a full-width blockquote at the top. Below two columns extend to either side of the viewport. The left side with a blue background and the right side with a night sky photo.<br>This may look funny on an ultra-wide monitor. See my post on Figma betrayals where I cover that topic.CSS subgrid is perfect for WordPress and other CMS content that is spat out as a giant blob of HTML. We basically have to centre the content wrapper for top-level prose to look presentable. With the technique I’ve shown we can break out more complex block patterns and then use subgrid to align their contents back inside. It only takes a single class to start!<br>Here’s the CodePen link again if you missed it.<br>Look how clean that HTML is! Subgrid helps us avoid repetitive nested wrappers. Not to mention any negative margin shenanigans.<br>Powerful stuff, right?<br>Browser support? Yes. Good enough that I’ve not had any complaints. Your mileage may vary, I am not a lawyer. Don’t subgrid and drive.
Subscribe
Blog RSS feed
Notes RSS feed<br>or
Combined RSS feed<br>and...