Добрый день, это канал посвященный небольшим инструкциям, которые я пишу для себя и людей, которые являются начинающими разработчиками.
Итогом этой статьи будет следующая сетка:
Которая будет верстаться таким кодом:
Теперь давайте приступим к написанию сеток на flexbox.
Подготовка проекта
Давайте для начала создадим стандартные стили для нашего проекта:
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #fff;
}
.container {
margin: 0 auto;
max-width: 1200px;
padding: 0 20px;
}
Свойство box-sizing: border-box; изменяет алгоритм расчета размеров элемента. Подробнее по ссылке.
Для body убираем стандартный отступ и делаем ему фон.
Также создаем .container, которому мы зададим максимальную ширину, добавим ему отступы по краям, чтобы контент не прилипал к краям экрана и пишем margin: 0 auto; для того, чтобы отцентровать наш контейнер по центру.
Создание карточки
Также создадим карточку (какой-то блок, который вы будите в дальнейшем верстать внутри элементов вашей сетки):
.card-1 {
background-color: #4dc4cc;
}
.card-2 {
background-color: #ffe882;
}
[class*="card-"] {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
height: 100px;
}
Тут все достаточно просто, мы создаем стили для карточки, она имеет высоту (чего не стоит делать в реальном проекте) и позиционирование всех дочерних элементов по центру, а также 2 разных фона, чтобы отличать их.
Создание сетки
Теперь давайте приступим к написанию самой сетки.
Создадим .col это будет класс одной колонки, которая будет поровну делить свободное место с другими колонками:
.col {
padding: 0 10px;
flex-grow: 1;
}
Свойство padding: 0 10px; задает отступы между колонками. Так, как колонки будут друг друга касаться, то в данной ситуации отступ между колонками будет не по 10 пикселей, а по 20, вы указывайте то значение, которое у вас в проекте.
Теперь создадим класс .grid, который будет иметь следующий вид:
.grid {
display: flex;
flex-wrap: wrap;
}
.grid является flex контейнером, в котором все элементы будут идти слева направо. С помощью свойства flex-wrap: wrap; мы указываем, что элементы нашего контейнера могут переноситься, если не будут влезать в нашу flex строку.
Теперь давайте посмотрим на нашу сетку, сделав вот такую вертску:
<div class="container">
<div class="card-1">card</div>
</div>
<div class="container">
<div class="grid">
<div class="col"><div class="card-1">col</div></div>
<div class="col"><div class="card-2">col</div></div>
<div class="col"><div class="card-1">col</div></div>
</div>
</div>
В результате мы увидим вот такой результат:
В этой верстке первый контейнер является контрольным, чтобы проверить, что наша сетка занимает весь контейнер без остатка. Как мы видим, сейчас у нас есть ошибка, так как наш класс col имеет отступ с обеих сторон он еще и отталкивается от стенок нашего контейнера на те самые 10 пикселей, которые мы указали в padding. Для того, чтобы это исправить давайте просто укажем отрицательный margin для нашего класса grid:
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
Теперь давайте проверим, что в браузере все корректно отображается:
Создание сложных сеток
Теперь давайте поговорим о более сложных сетках. Как правило бывают ситуации, когда блоки в дизайне выглядят так:
Во-первых нам надо знать, что в сетке всегда есть 12 колонок. То есть наш блок может занимать от 1 до 12 колонок в ширину. У нас это будут классы, которые будут называться col-2, где 2 - это количество колонок, которое будет занимать наш блок.
Теперь давайте напишем классы для наших блоков:
.col-1 {
padding: 0 10px;
width: calc(100% / 12);
}
.col-2 {
padding: 0 10px;
width: calc(100% / 12 * 2);
}
.col-3 {
padding: 0 10px;
width: calc(100% / 12 * 3);
}
.col-4 {
padding: 0 10px;
width: calc(100% / 12 * 4);
}
.col-5 {
padding: 0 10px;
width: calc(100% / 12 * 5);
}
.col-6 {
padding: 0 10px;
width: calc(100% / 12 * 6);
}
Для того, чтобы указать ширину блока мы будем высчитывать ширину 1 нашей колонки, после чего умножать на число колонок, которое должен занимать блок, для этого воспользуемся функцией calc из css, в дальнейшем хорошо было бы написать это сразу в процентах, чтобы стили применялись быстрее. Также по аналогии дописываем остальные классы до 12.
Теперь давайте создадим более сложную верстку и посмотрим на результат:
<div class="container">
<div class="card-1">card</div>
</div>
<div class="container">
<div class="grid">
<div class="col-1"><div class="card-1">col-1</div></div>
<div class="col-2"><div class="card-2">col-2</div></div>
<div class="col-1"><div class="card-1">col-1</div></div>
<div class="col-3"><div class="card-2">col-3</div></div>
<div class="col-6"><div class="card-1">col-6</div></div>
<div class="col-6"><div class="card-2">col-6</div></div>
<div class="col-4"><div class="card-1">col-4</div></div>
<div class="col-4"><div class="card-2">col-4</div></div>
<div class="col-5"><div class="card-1">col-5</div></div>
</div>
</div>
Также посмотрим на результат:
Как мы видим, то у нас вывелась наша сетка, давайте посмотрим на принцип ее работы на основе первой строки сетки. У нас есть .col-1 + .col-2 + .col-1 + .col-3 = 7 колонок. Из-за чего блок с шириной в 6 колонок переносится на новую строку, так как 7 + 6 = 13, а мы помним, что наша сетка содержит только 12 колонок. Остальное вы можете проверить по анологии.
Спасибо за прочтение статьи, подписывайтесь и оставляйте комментарии, о чем еще написать.
