html - CSS Grid：如何使项目跨越整个列？

Question

我有一个网格布局。现在我希望.left元素像这样跨越整个列：

但我试图做到这一点grid-row: auto / -1;，但它似乎不起作用。

我无法更改 html 结构，也无法对其进行硬编码，grid-row: auto / span xx因为元素的数量不确定。

如何使第一个元素始终跨越整个列？

section {
  counter-reset: spans;
  display: grid;
  grid-template-columns: 80px repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px;
}

section span {
  counter-increment: spans;
  border: solid 1px #aaa;
}

section span::before {
  content: counter(spans);
}

.left {
  grid-row: auto / -1;
}

<section>
  <span class="left"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</section>

Answer 1

解决方案是定义列和行。

    section {
  counter-reset: spans;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}

section span {
  counter-increment: spans;
  border: solid 1px #aaa;
}

section span::before {
  content: counter(spans);
}

.left {
  grid-row: 1 / -1;
}

如果您遇到任何问题，请告诉我。