Grid разметка

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

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

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

.column-1

.column-2

.column-3

.column-4

.column-5

.column-6

.column-7

.column-8

.column-9

.column-10

.column-11

.column-12

HTML

<div class="grid columns-12 pt-20 text-center"> <div class="bg-gray-100 column-1 p-4">.column-1</div> <div class="bg-gray-200 column-2 p-4">.column-2</div> <div class="bg-gray-300 column-3 p-4">.column-3</div> <div class="bg-gray-400 column-4 p-4">.column-4</div> <div class="bg-gray-300 column-5 p-4">.column-5</div> <div class="bg-gray-200 column-6 p-4">.column-6</div> <div class="bg-gray-100 column-7 p-4">.column-7</div> <div class="bg-gray-200 column-8 p-4">.column-8</div> <div class="bg-gray-300 column-9 p-4">.column-9</div> <div class="bg-gray-400 column-10 p-4">.column-10</div> <div class="bg-gray-300 column-11 p-4">.column-11</div> <div class="bg-gray-200 column-12 p-4">.column-12</div> </div>

.column-1

.column-3.row-1-3

.column-5-6

.column-2.row-5-6

HTML

<div class="grid columns-6 rows-6 bg-gray p-20 mt-40 text-center"> <div class="bg-gray-100 column-1 p-4">.column-1</div> <div class="bg-gray-100 column-3 row-1-3 p-4">.column-3.row-1-3</div> <div class="bg-gray-200 column-5-6 p-4">.column-5-6</div> <div class="bg-gray-200 column-2 row-5-6 p-4">.column-2.row-5-6</div> </div>

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

HTML