指定列数并在 CSS Grid 中仍然有换行

Question

我应该使用 12 列的 CSS 网格。当视口变小时，我也应该将表格堆叠在一列中。

这可以通过 CSS 网格实现吗？我阅读了换行，我必须使用auto-fill 或auto-fit。但我使用这两个中的任何一个，我不能指定 12 列。

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(12, 1fr);
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  grid-column: 1 /12;
}

.table1 {
  grid-column: 1 / 7;
  grid-row: auto / span 20;
}

.table2,
.table3 {
  grid-column: 7/ 12;
  grid-row: auto;
}

<div class="wrapper">
  <div class="box header">header</div>
  <div class="box table1">table 1</div>


  <div class="box table2">table 2</div>
  <div class="box table3">table 3</div>

</div>

Answer 1

您不能使用auto-fill 或auto-fit 指定固定数量的轨道。

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

当auto-fill或auto-fit作为重复数时，如果网格 容器在相关轴上有一个确定的大小或最大大小，然后 重复次数是最大可能的正整数 这不会导致网格溢出其网格容器。

如果任何重复次数会溢出，则重复 1 次。

考虑到the current (Level 1) version of CSS Grid 的限制，实现布局的最佳方式是使用带有自己的set of limitations 的flexbox (demo)，或者使用粗略和不优雅老式媒体查询的强大功能。