CSS网格：如何使项目跨越整个列？

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;
}

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