Day 7: subgrids

posted on 04.10.2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).

In the following example, the div elements use the grid defined in the dl element. The result is that all the dt and dd elements are aligned in the same “columns” respectively, even though they’re not on the same level in the DOM.

<dl>
  <div>
    <dt>HTML</dt>
    <dd>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</dd>
  </div>
  <div>
    <dt>JavaScript</dt>
    <dd>JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS</dd>
  </div>
</dl>

dl {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;
}

div {
  display: inherit;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

To make it a bit more obvious, here’s how the same grid looks like if you don’t use subgrid but copy the grid-template-columns declaration from the dl and use it on the div.

dl {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;
}

div {
  display: inherit;
  gap: inherit;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
}

See on CodePen

Overview: 100 Days Of More Or Less Modern CSS