Аналог 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;}
}