Укажите количество столбцов и сохраните перенос строк в CSS Grid

Question

Я должен использовать сетку CSS с 12 столбцами. Я также должен иметь стек таблиц в столбце, когда область просмотра становится меньше.

Возможно ли это с помощью 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. Повторите, чтобы заполнить: auto-fill и auto-fit повторы

Когда auto-fill или auto-fit дается в качестве номера повторения, если сетка Контейнер имеет определенный размер или максимальный размер в соответствующей оси, то количество повторений является наибольшим возможным положительным целым числом это не заставляет сетку переполнять ее контейнер с сеткой.

Если какое-либо количество повторений переполнится, то 1 повторение.

Лучший способ создать макет, учитывая ограничения текущей версии CSS Grid (уровень 1), - это flexbox ( demo ) , который поставляется с собственным набором ограничений или с грубой и неумелой силой старых добрых медиазапросов .