Автоматическая ширина столбцов сетки

grid-auto-columns
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

auto-cols

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

1
Short
Medium length
Larger amount of content
1
Short
Medium length
Larger amount of content
<div class="grid gap-3 grid-flow-col auto-cols">
    <div>1</div>
    <div>Short</div>
    <div>Medium length</div>
    <div>Larger amount of content</div>
</div>

auto-cols-min

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

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

auto-cols-max

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

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

auto-cols-fr

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

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

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

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

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

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

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

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