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

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

你为什么使用

display: grid;

，你应该使用

display:flex;

，如果你这样做那么你的问题就会解决。我创建了一个示例，请查看：

.container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .container>* {
      flex: 1 1 auto;
      padding: 8px;
      box-sizing: border-box;
    }

    .container .row {
      flex-basis: 100%;
    }

    .container>div {
      border: 1px solid #000;
    }

<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>