home chevron_right
Сетка chevron_right
Шаблон колонок сетки (grid-template-columns)

Шаблон колонок сетки (grid-template-columns)link

https://dev.ru.simai.io/ru/ui/utility/grid/grid-template-columns.php

Модификаторы grid-col-* задают количество колонок и их размер, формируя базовый шаблон сетки.

Таблица классовlink

Класс Значение
.grid-col-1 … 12 grid-template-columns: repeat(n, minmax(0, 1fr));
.grid-col-none grid-template-columns: none;

Синтаксисlink

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

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

Примерlink

<div class="grid grid-col-3 gap-2">
  <div class="sf-card bg-primary color-on-primary p-2">1</div>
  <div class="sf-card bg-secondary color-on-secondary p-2">2</div>
  <div class="sf-card bg-tertiary color-on-tertiary p-2">3</div>
</div>

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

<div class="grid grid-col-2 md:grid-col-4">
  <!-- 2 колонки на мобильных, 4 на md и выше -->
</div>

Playgroundlink