Нашёл очень полезный конструктор для создания grid сетки, теперь делюсь им с вами. Сайт https://cssgr.id/ на котором размещён конструктор сетки, очень сильно облегчает работу любому верстальщику.
Ссылка на сайт — https://cssgr.id/
Для разбора полного функционала понадобится не более 10 мин. Здесь все очень просто. Справа находится панель в которой вы забиваете свои параметры. Параметрами являются: количество столбцов, количество элементов, расстояние между элементами, максимальная ширина области в которой размещены элементы. Так же здесь есть список уже готовых сеток.
Слева вы увидите изменения которые происходят при прописание параметров.
Так же данный конструктор позволяет изменять каждый блок отдельно. Для этого нажмите на элемент и справа появится ещё 2 параметра, которые позволяют указывать длину и высоту выбранного элемента относительно соседних.
По окончанию создания сетки, нажмите на кнопку get code и скопируйте полученный HTML и CSS код.
Сетка из 12 колонок на Grid
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
}
.span-col-2{grid-column: span 2 / auto;}
.span-col-3{grid-column: span 3 / auto;}
.span-col-4{grid-column: span 4 / auto;}
.span-col-5{grid-column: span 5 / auto;}
.span-col-6{grid-column: span 6 / auto;}
.span-col-7{grid-column: span 7 / auto;}
.span-col-8{grid-column: span 8 / auto;}
.span-col-9{grid-column: span 9 / auto;}
.span-col-10{grid-column: span 10 / auto;}
.span-col-11{grid-column: span 11 / auto;}
.span-col-12{grid-column: span 12 / auto;}
