网格单元格可以跨越每一列而不指定列数吗？

Question

我有一个带有动态生成的行和列数的网格。单元格分别用grid-column-start放置。

我也有相应的标题，需要跨越每一列。我希望grid-column-start: 1; grid-column-end: -1会产生这种行为。但是，只有在使用grid-template-columns预先指定了列数的情况下，才这样做。

请参见以下演示：

.grid {
  display: grid;
  grid-gap: 5px;
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}

.grid-heading {
  background: pink;
  grid-column-start: 1;
  grid-column-end: -1;
  padding: 5px;
}

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}
<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>

是否可以在不规定列数的情况下获得完整的列跨越行为？

我有一个带有动态生成的行和列数的网格。单元格以grid-column-start单独放置。我也有相应的标题，需要跨越每一列。我...

Answer 1

不幸的是，没有。当前版本的CSS Grid（Level 1）无法做到这一点。

Answer 2

grid-row-start可以做到这一点，但它仍然是一种骇人听闻的方法，因为您将需要一个额外的元素来获取第一个单元格，并使真正的元素在顶部填充整行。如果不是第一行，可能会很棘手。