Subgrid Lowdown

here’s an example of how subgrid works:

Let’s say we have a grid container with two columns and two rows:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
}

And we have a child element that we want to position within this grid:

.child {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

If we want to create a subgrid within this child element that inherits the same grid properties as the parent container, we can use the display: subgrid property:

.child {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: subgrid;
}

This will allow any child elements within the .child element to be positioned and sized based on the same grid defined in the parent container.

Note that subgrid is currently not widely supported by all browsers, so it’s important to check for browser compatibility before using it in production.