Колонки

column
sm
md
lg
xl

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

Классы

Класс Значение
layout-col-1 columns: 1
layout-col-2 columns: 2
layout-col-3 columns: 3
layout-col-4 columns: 4
layout-col-5 columns: 5
layout-col-6 columns: 6
layout-col-7 columns: 7
layout-col-8 columns: 8
layout-col-9 columns: 9
layout-col-10 columns: 10
layout-col-11 columns: 11
layout-col-12 columns: 12
layout-col-auto columns: auto

Описание

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

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

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

Пример

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

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

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

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

<div class="md:layout-col-3"></div>

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

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