@ally
Свойство CSS grid-auto-flow определяет, как элементы размещаются внутри сетки, когда они не вписываются в уже заданный размер сетки.
Существует три значения для grid-auto-flow:
- "row" (по умолчанию) - новые элементы добавляются построчно, заполняя ячейки слева направо, а затем новые строки создаются сверху вниз.
- "column" - новые элементы добавляются в столбцах, заполняя ячейки сверху вниз, а затем новые столбцы создаются слева направо.
- "dense" - новые элементы пытаются заполнять пустующие ячейки, даже если они находятся после уже заполненных ячеек. Это может привести к более компактной компоновке элементов, но может также вызвать сложности при визуализации элементов, оверлапивших друг друга.
Пример использования:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-auto-flow: column;
}