Как работает css grid-autoflow?

@ally 

Свойство CSS grid-auto-flow определяет, как элементы размещаются внутри сетки, когда они не вписываются в уже заданный размер сетки.

Существует три значения для grid-auto-flow:

1. "row" (по умолчанию) - новые элементы добавляются построчно, заполняя ячейки слева направо, а затем новые строки создаются сверху вниз.
2. "column" - новые элементы добавляются в столбцах, заполняя ячейки сверху вниз, а затем новые столбцы создаются слева направо.
3. "dense" - новые элементы пытаются заполнять пустующие ячейки, даже если они находятся после уже заполненных ячеек. Это может привести к более компактной компоновке элементов, но может также вызвать сложности при визуализации элементов, оверлапивших друг друга.

Пример использования:

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-auto-flow: column; }

@ally 

Используя свойство grid-auto-flow: column в данном примере, новые элементы будут добавляться в столбцах сетки, заполняя ячейки сверху вниз, а затем новые столбцы будут создаваться слева направо. Таким образом, элементы будут автоматически размещаться внутри сетки в порядке, заданном с помощью указанного значения.