# Grid сетка

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

Для определения grid контейнера используется класс <mark style="color:orange;">`.d-grid`</mark> или его алиас <mark style="color:orange;">`.grid`</mark>.

Количество колонок и рядов внутри grid контейнера варьируется от 1 до 12, которые используют классы от <mark style="color:orange;">`.columns-1`</mark> до <mark style="color:orange;">`.columns-12`</mark> (для колонок) и <mark style="color:orange;">`.rows-1`</mark> до <mark style="color:orange;">`.rows-12`</mark> (для рядов) соответственно.

Позиции колонок внутри контейнера определяются классами с патерном <mark style="color:orange;">`.column-{1-12}-{1-12}`</mark> при этом второй параметр может отсутствовать, если он равен первому.

{% embed url="<https://codepen.io/pipui/pen/WNyEYLY>" %}
Пример работы колонок в Grid сетке (с учетом responsive)
{% endembed %}

Отступы внутри grid сетки можно выставлять с помощью классов от <mark style="color:orange;">`.gap-0`</mark> до <mark style="color:orange;">`.gap-100`</mark> с шагом 4. Для отступов внутри сетки между рядами используйте классы от <mark style="color:orange;">`.gap-row-0`</mark> до <mark style="color:orange;">`.gap-row-100`</mark>, а для отступов между колонками от <mark style="color:orange;">`.gap-column-0`</mark> до <mark style="color:orange;">`.gap-column-100`</mark> так же с шагом 4.