html - 将元素拉伸(stretch)到自动计算的网格的末尾，而不仅仅是显式网格

Question

在 CSS 网格中，您可以使用 grid-column: 1/-1 将元素拉伸(stretch)到整个 explicit 网格。但是，如果您添加新元素并且网格自动具有比明确说明更多的列，则不会产生相同的效果。

有什么值可以代替 -1 来强制元素一直延伸到网格的末端吗？

在下面的示例中，因为 grid-auto-flow 设置为 column，所以额外的元素会添加新的列。我希望 .stretch 元素拉伸(stretch)整个网格宽度，而不仅仅是指定 3x3 网格的宽度。

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: 1 / -1;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

Answer 1

一个hacky的想法是让元素跨越大量的列:

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: span 20;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

请注意，只有当您未指定 grid-column-gap 并且您将隐式新列保持为 auto 宽度时，此 hack 才有效。

添加间隙会破坏它:

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap:1px;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: span 20;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

使隐式列不同于 auto 会破坏它:

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns:10px;
  grid-auto-flow: column;
  width: 300px;
}

.item {
  border: 1px solid red;
  padding: 15px;
}

.stretch {
  grid-column: span 20;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

---

如果你想考虑间隙，只需考虑边距，如果你想定义宽度，请在元素上定义它。

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  width: 300px;
  margin-left:-10px;
}

.item {
  border: 1px solid red;
  padding: 15px;
  margin-left:10px;
}

.stretch {
  grid-column: span 20;
}

.item:nth-child(n + 8) {
  border-color:blue;
  min-width:40px;
}

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>

<div class="grid">
  <div class="stretch item">
    Stretched
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
  <div class="item">
    .
  </div>
</div>