Автоматическое формирование сетки (grid-auto-flow)link

https://dev.ru.simai.io/ru/ui/utility/grid/grid-auto-flow.php

В SIMAI Framework с помощью модификаторов можно управлять автоматическим размещением элементов в сетке. Это позволяет гибко адаптировать отображение контента, сохраняя порядок либо оптимизируя использование доступного пространства.

Таблица классовlink

Класс Значение
.grid-flow-row grid-auto-flow: row;
.grid-flow-col grid-auto-flow: column;
.grid-flow-row-dense grid-auto-flow: row dense;
.grid-flow-col-dense grid-auto-flow: column dense;

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

  • Контрольная точка (необязательный параметр):
    Применяет модификатор начиная с определённого размера экрана (sm, md, lg, xl).
    Если не указана, модификатор применяется для всех размеров.

  • Модификатор (обязательный параметр):

    • grid-flow-row — элементы последовательно заполняют строки.
    • grid-flow-col — элементы последовательно заполняют столбцы.
    • grid-flow-row-dense — элементы размещаются по строкам, пытаясь занять свободное место, даже если это нарушает порядок.
    • grid-flow-col-dense — элементы размещаются по столбцам, пытаясь занять свободное место, даже если это нарушает порядок.

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

<div class="grid grid-col-6 gap-1 grid-flow-row">
    <div class="col-span-4">1</div>
    <div class="col-span-3">2</div>
    <div class="col-span-2">3</div>
    <div class="col-span-3">4</div>
</div>

В этом примере элементы будут заполнять строки по порядку.

Адаптивностьlink

Для изменения поведения начиная с определённого размера экрана, добавьте контрольную точку:

<div class="md:grid-flow-row-dense">
    <!-- Начиная с md элементы будут размещаться плотнее по строкам -->
</div>