使用自动列使元素跨越网格中的所有列

Question

我有一个具有自动列和2行的CSS网格，其中除特定元素外的所有元素都进入第一行。特殊元素位于第二行，应填充所有列使用的整个空间。

当前的实现是这样的：

.TabArea {
  display: grid;
  grid-auto-columns: auto;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  
  /* for visualization purposes */
  background: gainsboro;
}

.Tab-title {
  grid-row: 1;
}

.Tab-body {
  grid-row: 2;
  grid-column: 1 / -1;
  
  /* for visualization purposes */
  background: beige;
}

<div class="TabArea">
  <div class="Tab-title">Title A</div>
  <div class="Tab-title">Title B</div>
  <div class="Tab-title">Title B</div>
  <div class="Tab-body">content</div>
</div>

但是，正如您所看到的，尽管存在其他列，但Tab-body仅位于第一列。如何使其覆盖所有列？

https://stackoverflow.com/a/44052563/1045510中的解决方案在这里不起作用，因为列数是可变的，并且列最后会占用空间，将Tab-title推到左侧。

Answer 1

我认为您需要使用span使其跨列，因为您只能在explicit grid中使用负整数：

.TabArea {
  display: grid;
  grid-auto-columns: auto;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  
  /* for visualization purposes */
  background: gainsboro;
}

.Tab-title {
  grid-row: 1;
}

.Tab-body {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: span 3;
  
  /* for visualization purposes */
  background: beige;
}

<div class="TabArea">
  <div class="Tab-title">Title A</div>
  <div class="Tab-title">Title B</div>
  <div class="Tab-title">Title B</div>
  <div class="Tab-body">content</div>
</div>