Цифровое агентство. Сайты на 1С-Битрикс.

В этой статье мы рассмотрим, как может быть реализована сетка на CSS Grid.

Выбор того, как обращаться с макетами и позиционированием контента, вероятно, является одним из первых решений, которые вы собираетесь предпринять при создании нового проекта.

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

В этой статье мы рассмотрим, как может быть реализована сетка на CSS Grid.

Двумерная компоновка

Если мы хотим создать двумерный макет, где мы также можем контролировать высоту наших элементов, то, вероятно, лучшим решением будет CSS Grid.

Вот пример макета, который вы можете создать, используя эту технику:

Мы будем использовать mixin gridLayout ().

Этот новый mixin примет в качестве аргумента список пар чисел:

.grid {
@include gridLayout(
(7, 2), //item 1
(5, 1), //item 2
(5, 1), //item 3
(12, 1) //item 4
);
}


Для каждого элемента в вашем макете вам нужно будет передать пару чисел, что означает, что наш макет состоит из 4 элементов. Первое значение (число) определяет количество столбцов которое необходимо занять, а второе - строк (row).

Второй параметр, он не обязательный, его необходимо указывать, если необходимо занять элементу явную высоту.    

Сетка будет иметь 12 столбцов с 100% шириной.

Вот как будет выглядеть mixin:

$grid-columns: 12;
@mixin gridLayout($cols...) {
display: grid;
@supports(grid-area: auto) {
grid-template-columns: repeat($grid-columns, 1fr);
$i: 1;
@each $col in $cols {
> :nth-of-type(#{$i}) {
grid-column-end: span nth($col, 1);
@if length($col)>1 {
grid-row-end: span nth($col, 2);
}
}
$i: $i+1;
}
}
}

Возврат к списку