Сегодня я с вами поделюсь сеткой из 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;}
}
