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

Пользователь

от ally , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от craig.emmerich , 7 месяцев назад

@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; }

Пользователь

от ransom_homenick , 13 часов назад

@ally 

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