Subgrid

It is a feature of CSS grid level 2 that allows a child grid to inherit the row or column definition from the parent grid.

Used in grid-template-rows or grid-template-columns with the value subgrid.
The subgrid must span a range of columns or rows from the parent.

Example

In this example, we can see how the content class inherits the column definition from the parent container. To achieve this, we use grid-column: 1 / -1, which makes it occupy all available columns, from the first to the last.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="content">
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="content">
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr;
  padding: 0.5rem;
}

.content {
  display: grid;
  gap: 0.5rem;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr;
  padding: 0.5rem;
}

.content {
  display: grid;
  gap: 0.5rem;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.