К Завернуть сетку в вертикальном направлении, вам нужно сделать немного больше:
укажите height для контейнера сетки , чтобы элементы сетки знали, когда обернуть,
также укажите grid-auto-flow: column (переопределение по умолчанию grid-auto-flow: row)
См. Демонстрацию ниже (установите height: 100% для иллюстрации):
body,
html {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(140px, 200px));
grid-auto-flow: column; /* added */
height: 100%; /* adjust this*/
}
.wrapper>div:nth-child(odd) {
background-color: red;
}
<div class="wrapper">
<div class="one"> 1 </div>
<div class="one"> 2 </div>
<div class="one"> 3 </div>
<div class="one"> 4 </div>
<div class="one"> 5 </div>
</div>
Зачем указывать высоту?
Поскольку для auto-fill или auto-fit требуется определенный размер по этой оси:
7.2.3.2. Repeat-to-fill: auto-fill and auto-fit repetitions
Когда в качестве номера повторения задано автозаполнение, если сетка
Контейнер имеет определенный размер или максимальный размер в соответствующей оси, то
количество повторений является наибольшим возможным положительным целым числом
это не заставляет сетку переполнять поле содержимого ее сетки
контейнер (рассматривая каждую дорожку как функцию максимального размера дорожки, если
это определенно или как его функция минимального размера дорожки в противном случае,
и с учетом разрыва); если любое количество повторений будет
переполнение, затем 1 повторение. В противном случае, если сетка контейнера имеет
определенный минимальный размер на соответствующей оси, количество повторений
наименьшее возможное натуральное число, которое удовлетворяет этому минимуму
требование. В противном случае указанный список дорожек повторяется только один раз.
Автоматическое заполнение в направлении строки проще
Обратите внимание, что здесь, вам не нужно указывать ширину , так как display: grid является блочным элементом , а блочные элементы имеют ширину области просмотра. Вы можете просто использовать grid-template-columns: repeat(auto-fill, minmax(140px, 200px)) здесь:
body,
html {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 200px));
/*grid-auto-flow: row; --> default (so not needed) */
}
.wrapper>div:nth-child(odd) {
background-color: red;
}
<div class="wrapper">
<div class="one"> 1 </div>
<div class="one"> 2 </div>
<div class="one"> 3 </div>
<div class="one"> 4 </div>
<div class="one"> 5 </div>
</div>
Почему grid-auto-flow: column?
См. Соответствующие выдержки из его определения - это свойство контролирует, как элементы сетки текут в контейнере сетки , если они явно не размещены:
grid-auto-flow
CSS-свойство grid-auto-flow определяет способ автоматического размещения
алгоритм работает, точно определяя, как автоматически размещаются элементы
в сетку.
Значение по умолчанию grid-auto-flow равно row, поэтому вам необходимо переопределить до column:
row
Алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди,
добавление новых строк по мере необходимости. Если ни строка, ни столбец не указаны,
предполагается строка.