指定列数，并且在CSS Grid中仍具有换行

Question

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

CSS网格有可能吗？我读行换行时必须使用val productList = items.mapIndexed { index, item -> Product(item, itemDescriptions[index]) } 或auto-fill。但是我使用这两个中的任何一个，我不能指定12列。

auto-fit

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

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的局限性，实现布局的最佳方法是使用 flexbox （demo），它带有自己的set of limitations，或具有良好的老式媒体查询的粗俗功能。