Колонки (column)link

https://dev.ru.simai.io/ru/ui/utility/layout-break/column.php

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

Синтаксисlink

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

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

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

    • layout-col-1 ... layout-col-12 — задаёт количество колонок в элементе от 1 до 12.
    • layout-col-auto — количество колонок определяется автоматически на основе контента.

Примерыlink

layout-col-3
Пример с тремя колонками:

<div class="layout-col-3">
    <div class="aspect-1x1">...</div>
    <div class="aspect-1x2">...</div>
    <div class="aspect-2x1">...</div>
</div>

md:layout-col-3
Применение трёх колонок начиная с разрешения md (например, md:layout-col-3):

<div class="md:layout-col-3">
    <!-- При размере экрана меньше md будет 1 колонка или заданное по умолчанию значение,
         при достижении md и более — 3 колонки -->
</div>

В данном примере на экранах размера Medium и больше элемент будет отображаться в три колонки. На меньших экранах количество колонок будет по умолчанию (например, одна колонка, если не указано иное).

Таким образом, модификатор column упрощает управление колонками в интерфейсе, делая дизайн более гибким и адаптируемым под различные размеры экранов.