使用带有自动列跨度的CSS子网格

Question

我有以下 html 结构。

<div class="grandparent">
  <div class="parent">
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
  </div>
  <div class="achild1">Child 1</div>
</div>

.parent {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 6;
  background-color: lightblue;
  padding: 10px;
}

.grandparent {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 columns */
  gap: 10px;
  background-color: lightgreen;
  padding: 20px;
}

.achild1 {
  background-color: lightpink;
  height: 50px;
  padding: 20px;
}

.achild2 {
  background-color: lightyellow;
  height: 50px;
  border: 2px solid red;
  padding: 10px;
}

达到以下效果

问题是

child1

的数量是动态的，并且每个可能跨越可变数量的列。因此无法指定

parent

SPAN。

我可以在

display: contents

上使用

parent

，效果很好。我想知道如何使用 SUBGRID

达到相同的效果

用于实验的 codepen 链接： https://codepen.io/rsun2100/pen/GRebbvJ

Answer 1

您可以修改 .parent 类以利用子网格进行布局。

.parent {
  display: grid;
  grid-template-columns: subgrid; /* Use subgrid */
  background-color: lightblue;
  padding: 10px;
}

.grandparent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  background-color: lightgreen;
  padding: 20px;
}

.achild1 {
  background-color: lightpink;
  height: 50px;
  padding: 20px;
}

.achild2 {
  background-color: lightyellow;
  height: 50px;
  border: 2px solid red;
  padding: 10px;
}

HTML：

<div class="grandparent">
  <div class="parent">
    <div class="achild1">Child 1</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
    <div class="achild2">Child 2</div>
  </div>
  <!-- Remove the direct child1 div -->
</div>

这将允许

.parent

网格使用子网格与

.grandparent

网格的列对齐。