Для вертикальной сетки, которая создает новые столбцы по мере необходимости, а строки не определены, рассмотрите возможность использования Многоколоночный макет CSS (пример). CSS Grid Layout (по крайней мере, текущая реализация - уровень 1) не может выполнить это задача. Вот в чем проблема:
В CSS Grid Layout существует обратная связь между свойствами grid-auto-flow и grid-template-rows / grid-template-columns.
В частности, с определением grid-auto-flow: row (настройка по умолчанию) и grid-template-columns элементы сетки плавно перемещаются в горизонтальном направлении, автоматически создавая новые строки по мере необходимости. Эта концепция проиллюстрирована в коде вопроса.
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Однако при переключении на grid-template-rows элементы сетки складываются в один столбец.
#container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: row;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Нет автоматического создания столбцов с grid-auto-flow: row и grid-template-rows. grid-template-columns должен быть определен (следовательно, обратная связь с grid-auto-flow).
#container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
То же самое верно и в обратном сценарии.
Когда определены grid-auto-flow: column и grid-template-rows, элементы сетки плавно перемещаются в вертикальном направлении, автоматически создавая при необходимости новые столбцы.
#container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Однако при переключении на grid-template-columns элементы сетки складываются в одну строку. (Это проблема, о которой спрашивает большинство людей, в том числе и в этом вопросе.)
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Автоматического создания строк нет. Для этого необходимо определить grid-template-rows. (Это решение, которое предоставляется чаще всего, но оно обычно отклоняется, потому что макеты имеют переменное количество строк.)
#container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
}
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
Следовательно, рассмотрите решение с несколькими столбцами, как предложено выше.
Ссылка на спецификацию: 7.7. Автоматическое размещение: свойство grid-auto-flow
person
Michael Benjamin
schedule
21.05.2017
