使用自动列使元素跨越网格上的所有列[重复]

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-titles 推到左侧。

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>