CSS Grid Level 2: Subgrid

Good news! Firefox 69 will support subgrid. As Rachel Andrew explains:

In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own track listings. However it makes a number of previously difficult patterns possible.

For example, if you have a card layout, and the cards have headers and footers with uneven amounts of content, you might want the card headers and footers to align across the rows. However, with a standard nested grid this isn’t possible.

With Subgrid that type of layout is perfectly possible:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.card {
  grid-row: auto / span 3;
  border: 1px solid rgb(0,48,90);
  border-radius: 5px;
  display: grid;
  grid-template-rows: subgrid;
}

More use cases in the article.

CSS Grid Level 2 – subgrid is coming to Firefox →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.