быстрое создание grid сетки

Конструктор grid сетки. Как быстро создать grid сетку для сайта

Содержимое:

Нашёл очень полезный конструктор для создания 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;}
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime