Grid сетка

Данный компонент позволяет быстро произвести разметку блоков внутри контейнера.

Для определения grid контейнера используется класс .d-grid или его алиас .grid.

Количество колонок и рядов внутри grid контейнера варьируется от 1 до 12, которые используют классы от .columns-1 до .columns-12 (для колонок) и .rows-1 до .rows-12 (для рядов) соответственно.

Позиции колонок внутри контейнера определяются классами с патерном .column-{1-12}-{1-12} при этом второй параметр может отсутствовать, если он равен первому.

Пример работы колонок в Grid сетке (с учетом responsive)

Отступы внутри grid сетки можно выставлять с помощью классов от .gap-0 до .gap-100 с шагом 4. Для отступов внутри сетки между рядами используйте классы от .gap-row-0 до .gap-row-100, а для отступов между колонками от .gap-column-0 до .gap-column-100 так же с шагом 4.

Last updated