Автоматическое формирование сетки

grid-auto-flow
sm
md
lg
xl

В SIMAI Framework с помощью модификатора можно автоматическим размещением элементов в сетке.

Классы

Класс Значение
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;

Описание

Адаптивный модификатор. Позволяет управлять поведением автоматически размещаемых элементов в сетке, в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • grid-flow-row - элементы заполняют поочередно каждую строку. Новые строки добавляются по мере необходимости;
    • grid-flow-col - элементы заполняют поочередно каждый столбец. Новые столбцы добавляются по мере необходимости;
    • grid-flow-row-dense - элементы заполняют каждую строку в соотвествии с размером. Порядок элементов может нарушаться;
    • grid-flow-col-dense - элементы заполняют каждый столбец в соотвествии с размером. Порядок элементов может нарушаться;

grid-flow-row

С помощью модификатора grid-flow-row можно заполнить строки сетки соблюдая очередность элементов.

1
2
3
4
<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>

grid-flow-row-dense

С помощью модификатора grid-flow-row-dense можно заполнить строки сетки исходя из размеров элементов.

1
2
3
4
<div class="grid grid-col-6 gap-1 grid-flow-row-dense">
    <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>

grid-flow-col

С помощью модификатора grid-flow-col можно заполнить столбцы сетки соблюдая очередность элементов.

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

grid-flow-col-dense

С помощью модификатора grid-flow-col-dense можно заполнить столбцы сетки исходя из размеров элементов.

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

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

Для управления параметрами автоматического размещения элементов в сетке, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:grid-flow-dense для размещения элемнетов сетки в строказ исходя из их размеров для экранов размером Medium и больше.

<div class="md:grid-flow-dense"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью