CSS Subgrids are rarely useful... but sometimes they're amazing! - ✁ ∙ Web Crafting

I just want to shout the praises of CSS Subgrids, because they're amazing. They let you use HTML code that represents what things are (e.g. lists), but then still lay things out in any kind of "tabular" way you like.

Here's a recent example. I threw together a website recently that included a schedule of the films that'll be shown at a film night I'm hosting. I wrote the schedule a bit like this:

Code

<ol id="schedule">
  <li>
    <span>Prerolls</span>
  </li>
  <li>
    <time>7:40pm</time>
    <span>Intro from Dan</span>
  </li>
  <li>
    <time>7:45pm</time>
    <span class="film-title">Some Short Film</span>
  </li>
  <li>
    <time>7:48pm</time>
    <span>Intermission</span>
  </li>
  <li>
    <time>8pm</time>
    <span class="film-title">Feature Film</span>
  </li>
  <li>
    <time>9:55pm</time>
    <span>Closedown</span>
  </li>
</ol>

A ordered list is a great semantic choice for this kind of content: it is, after all, a list of things whose order matters! I'm sure you'll agree that the HTML code is very readable (which does my future-self a favour when I come back to this code in five years time or something!).

But the default styling... doesn't look very good:

A "grid" would be a great way to lay out the list like a timetable, with times running down the side and the corresponding items alongside them, right? But if we apply a grid to each item in the list then it's hard to control the widths of the "columns" all-together: what I'd want is that if one time gets wider, then all times get wider to compensate.

So what we need to do is to apply a grid to the list itself. And then inherit that as a subgrid within each item. Like this:

Code

#schedule {
  /* Stop it looking "like a numbered list": */
  list-style: none;
  padding: 0;
  
  /* Lay it out in a grid: */
  display: grid;
  
  /* Small gap between items; bigger gap between times and titles */
  gap: 0.5ch 1ch;
  
  /* 1st just wide enough, 2nd fills the space: */
  grid-template-columns: min-content 1fr;
  
  li {
    /* Each list item spans both columns and continues the grid: */
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    
    /* The <span> always goes in the second column (even if there
     * is no <time>, like for the "prerolls" item):
     */
    span {
      grid-column: 2;
    }
  }
}

Now my timetable's laid-out right, but still from the same simple, readable (and semantic) HTML:

I just need a little more CSS to make it prettier and I'm all set:

Code

#schedule {
  /* Wide enough to contain the text without wrapping, unless necessary: */
  width: max-content;
  
  /* General appearance: */
  background: linear-gradient(#9b5f00, #672c00);
  color: #fbfbfb;
  font-weight: 300;
  padding: 2ch 1ch;
  transform: rotateZ(-3deg);
  box-shadow: 4px 4px 12px black;
  
  /* Line between items (i.e. above each except the first!) */
  li:not(:first-child) {
    padding-top: 0.75ch;
    border-top: 2px dotted black;
  }
  
  time {
    /* Small text, center-right aligned: */
    font-size: 65%;
    text-align: right;
    align-self: center;
    
    /* General appearance: */
    font-family: monospace;
    color: #bbb;
  }
}

(I'd meant to make .film-titles italic; whoops; I'll fix that later!)

Now I've got something moderately-pretty from the simplest and most-accessible HTML code imaginable. If I want to replicate this on another page, all I need is a list with the same id="schedule":

And because all of the layout and style is part of the CSS, leaving the HTML to represent just the "content", I can make alterations on that other page easily. Like if I want to swap which way around the titles and times appear, that's really easy:

Code

#schedule li {
  /* Move <time>s to the right: */
  time {
    grid-column: 2;
    text-align: left;
  }
  
  /* Move <span>s to the left: */
  span {
    /* NOTE use of grid-area rather than grid-column
     * to prevent the <span>s from jumping to column 1
     * of the SECOND row!
     */
    grid-area: 1;
  }
  
  /* Let's make the prerolls (and anything else without
   * a time) centered across both columns instead:
   */
  &:not(:has(time)) span {
    grid-column: span 2;
    text-align: center;
  }
}

All of this was only a few minutes work (I spent much longer writing this post about it!), and I've gone off-topic a bit now, but the important bit was that CSS subgrids are very rarely useful... but when they are useful, they're amazing!

The other time I've really enjoyed their power was when I needed to lay out a grid of "cards", each of which in turn contained a grid of information. I didn't want to fix the widths of the grids on the cards but wanted them to resize dynamically to whatever screen width was in use, but I still wanted the cards to appear consistent with each other, so subgrids was the winner there too.

Anyway: here's a codepen if you'd like to play with my example.