Аналог Bootstrap сетки на Grid. Сетка для адаптивной верстки

Содержимое:

Сегодня я с вами поделюсь сеткой из 12 колонок как в Bootstrap, которую я использую для создания верстки сайтов. Это пустая сетка без стороннего кода. Моя сетка написана на Grid и является адаптивной, вы можете её отредактировать под себя, а так же изменить и создать своё количество колонок

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

Простая Grid сетка из 12 колонок

.grid – это класс для родительского элемента, он делит блок родителя на 12 колонок. Все остальные классы, аналогично bootstrap занимают указанное пространство.

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
.pc-col-2{grid-column: span 2 / auto;}
.pc-col-3{grid-column: span 3 / auto;}
.pc-col-4{grid-column: span 4 / auto;}
.pc-col-5{grid-column: span 5 / auto;}
.pc-col-6{grid-column: span 6 / auto;}
.pc-col-7{grid-column: span 7 / auto;}
.pc-col-8{grid-column: span 8 / auto;}
.pc-col-9{grid-column: span 9 / auto;}
.pc-col-10{grid-column: span 10 / auto;}
.pc-col-11{grid-column: span 11 / auto;}
.pc-col-12{grid-column: span 12 / auto;}

Адаптивная сетка из 12 колонок

Для адаптивной сетки вы можете использовать следующий код.


.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}

@media(min-width: 1025px) {
    .pc-col-2{grid-column: span 2 / auto;}
    .pc-col-3{grid-column: span 3 / auto;}
    .pc-col-4{grid-column: span 4 / auto;}
    .pc-col-5{grid-column: span 5 / auto;}
    .pc-col-6{grid-column: span 6 / auto;}
    .pc-col-7{grid-column: span 7 / auto;}
    .pc-col-8{grid-column: span 8 / auto;}
    .pc-col-9{grid-column: span 9 / auto;}
    .pc-col-10{grid-column: span 10 / auto;}
    .pc-col-11{grid-column: span 11 / auto;}
    .pc-col-12{grid-column: span 12 / auto;}
}

/* TABLE VERSION */
@media(max-width: 1024px) and (min-width: 768px) {
    .table-col-2{grid-column: span 2 / auto;}
    .table-col-3{grid-column: span 3 / auto;}
    .table-col-4{grid-column: span 4 / auto;}
    .table-col-5{grid-column: span 5 / auto;}
    .table-col-6{grid-column: span 6 / auto;}
    .table-col-7{grid-column: span 7 / auto;}
    .table-col-8{grid-column: span 8 / auto;}
    .table-col-9{grid-column: span 9 / auto;}
    .table-col-10{grid-column: span 10 / auto;}
    .table-col-11{grid-column: span 11 / auto;}
    .table-col-12{grid-column: span 12 / auto;}
}

/* TABLE VERSION */
@media(max-width: 767px) {
    .mobil-col-2{grid-column: span 2 / auto;}
    .mobil-col-3{grid-column: span 3 / auto;}
    .mobil-col-4{grid-column: span 4 / auto;}
    .mobil-col-5{grid-column: span 5 / auto;}
    .mobil-col-6{grid-column: span 6 / auto;}
    .mobil-col-7{grid-column: span 7 / auto;}
    .mobil-col-8{grid-column: span 8 / auto;}
    .mobil-col-9{grid-column: span 9 / auto;}
    .mobil-col-10{grid-column: span 10 / auto;}
    .mobil-col-11{grid-column: span 11 / auto;}
    .mobil-col-12{grid-column: span 12 / auto;}
}

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