网格使列跨越整行并具有动态列

Question

我想要实现的是使

.row

单元格保留在附加行上，并且无论有多少列都跨越整行：

我用grid-column: 1 / -1技巧检查了

这个答案

，但它似乎不适用于具有动态列的网格，有什么建议吗？

预期结果

.container {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: auto;
  gap: 8px;
}

.container > * {
  padding: 8px;
  border: solid 1px;
}

.container .row {
  grid-row: -1;
  grid-column: 1 / -1;
}

<div class="container">
  <div>COL</div>
  <div>COL</div>
  <div class="row">ROW</div>
</div>

<br />

<div class="container">
  <div>COL</div>
  <div>COL</div>
  <div>COL</div>
  <div class="row">ROW</div>
</div>

Answer 1

使用网格模板列：repeat(3, 1fr);对于容器。

Fr 是小数单位，1fr 代表可用空间的 1 部分

.container {
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: auto;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.container > * {
  padding: 8px;
  border: solid 1px;
}

.container .row {
  grid-row: -1;
  grid-column: 1 / -1;
}

<div class="container">
  <div>COL</div>
  <div>COL</div>
  <div class="row">ROW</div>
</div>

<br />

<div class="container">
  <div>COL</div>
  <div>COL</div>
  <div>COL</div>
  <div class="row">ROW</div>
</div>