Автоматический размер строк сетки

grid-auto-rows
sm
md
lg
xl

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

Классы

Класс Значение
auto-rows grid-auto-rows: auto;
auto-rows-min grid-auto-rows: min-content;
auto-rows-max grid-auto-rows: max-content;
auto-rows-fr grid-auto-rows: minmax(0, 1fr);

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • auto-rows - размер строк устанавливается автоматически (параметр по умолчанию);
    • auto-rows-min - размер строк устанавливается по минмальному размеру содержимого;
    • auto-rows-max - размер строк устанавливается по максимальному размеру содержимого;
    • auto-rows-fr - размер строк равным;

auto-rows

С помощью модификатора auto-rows можно установить автоматический размер строк.

1
Short
Medium length
Larger amount of content
<div class="grid gap-1 auto-rows">
    <div>1</div>
    <div>Short</div>
    <div>Medium length</div>
    <div>Larger amount of content</div>
</div>

auto-rows-min

С помощью модификатора auto-rows-min можно установить размер строк исходя минимального размера содержимого.

1
Short
Medium length
Larger amount of content
<div class="grid gap-1 auto-rows-min">
    <div>1</div>
    <div>Short</div>
    <div>Medium length</div>
    <div>Larger amount of content</div>
</div>

auto-rows-max

С помощью модификатора auto-rows-max можно установить размер строк исходя из максимального размера содержимого.

1
Short
Medium length
Larger amount of content
<div class="grid gap-1 auto-rows-max">
    <div>1</div>
    <div>Short</div>
    <div>Medium length</div>
    <div>Larger amount of content</div>
</div>

auto-rows-fr

С помощью модификатора auto-rows-fr можно установить равный размер строк.

1
Short
Medium length
Larger amount of content
<div class="grid gap-1 auto-rows-fr">
    <div>1</div>
    <div>Short</div>
    <div>Medium length</div>
    <div>Larger amount of content</div>
</div>

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

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

Например, используйте модификатор md:auto-rows-min для установки размера строк исходя из минимального размера содержимого для экранов размером Medium и больше.

<div class="md:auto-rows-min"></div>

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

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