Шаблон колонок сетки

grid-template-columns
sm
md
lg
xl

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

Классы

Класс Значение
grid-col-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-col-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-col-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-col-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-col-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-col-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-col-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-col-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-col-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-col-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-col-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-col-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-col-none grid-template-columns: none;

Описание

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

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

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

Пример

1
2
3
4
5
6
7
8
9
<div class="grid grid-col-3 gap-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

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

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

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

<div class="md:grid-col-4"></div>

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

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