Одна из удобнейших частей спецификации CSS Grid — это grid-gap. Это значительно упрощает создание «внутренних полей» для сеток.
Поля и хаки, которые мы делаем, чтобы очистить их в различных контекстах, долгое время были одним из основных раздражающих факторов в CSS. Отступы в гриде имели большой смысл.
Как оказалось, это имело большой смысл и для других. W3C рекомендовал перейти с grid-gap на просто gap и разрешить его во Flexbox и Multi-Column.
В этом руководстве мы рассмотрим, как мы добавляли поля в прошлом с помощью Flex и как gap это делает тепрь, чтобы мы могли иметь эти внутренние поля без каких-либо хаков.
Поля в простой сетке Flexbox
В этом примере мы возьмем ряд блоков, используем Flexbox для создания стиля сетки, а затем разделим блоки через поля.
Мы начнем с базового HTML. А flex-container и несколько flex-items.
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
Мы добавим немного flex, чтобы расположить все содержимое рядом друг с другом, добавим немного width вычислений для определения размера наших элементов, а затем позволим им перенестись с flex-wrap.
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: calc(100% / 3);
}
Это дает нам боксы идеального размера, которые составляют 1/3 ширины нашего контейнера. Давайте добавим несколько полей, чтобы разместить пространство между каждым элементом по вертикали и по горизонтали.
.flex-item {
width: calc(100% / 3);
margin-right: 1rem;
margin-bottom: 1rem;
}
О-о! Наши трети идеального размера теперь больше не подходят для трёх колонок в нашем гибком макете! Это хороший запас между строками, однако!
Нам нужно будет скорректировать наш расчет ширины, чтобы иметь дело с дополнительным маргинальным пространством. Нам также нужно очистить поле справа от каждого третьего элемента.
Теперь у нас есть два 1rem поля, и нам нужно вычесть их сумму 2rem поровну из ширины всех трех элементов.
flex-item {
// width: calc(100% / 3);
width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items
margin-right: 1rem;
margin-bottom: 1rem;
}
.flex-item:nth-child(3n) {
margin-right: 0;
}
Это кажется слишком сложным? Оно такое и есть. Есть более простые способы сделать это, но они также не дают идеальных 1rem промежутков между столбцами. Этот сложный код также значительно усложняет адаптивный дизайн.
Как только gap свойство станет доступным для использования во Flexbox во всех браузерах, код станет намного чище. Мы также можем перейти от установки ширины для наших элементов — легкого кода для меня в мире Grid — к использованию flex-grow и flex-shrink свойствам flex-basis.
Gap-способ установки внутренних полей в Flex
Используя отступ, мы избавляемся от необходимости выполнять большую часть нашего геморроя с шириной. Это также позволяет нам вернуться к использованию гибких значений увеличения/уменьшения флекс-боксов.
В этом случае у нас все еще есть display: flex и flex-wrap: wrap на нашем контейнере, но теперь мы еще добавляем свое значение gap. Это короткая запись, которая представляет отступы в строках и столбцах. Ознакомьтесь с документацией Mozilla Developer Network, чтобы узнать обо всех различных методах .
Оттуда, вместо того, чтобы устанавливать ширину для каждого гибкого элемента, мы установим наши гибкие значения увеличения, сжатия и базовые значения. flex-basis будет такими, как браузер определит, сколько столбцов нужно создать. Мы по-прежнему будем использовать calc()для этого, но полученный код будет намного чище.
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.flex-item {
flex: 1 1 calc((100% / 3) - 2rem);
}
Проницательный глаз также заметит, что это позволяет нашим последним элементам расти, чтобы заполнить пространство строки, в которой недостаточно элементов. То, что Grid не сделает для нас, и наш пример Flex, основанный на ширине, не сделает.
Бонус: Gap также упрощает реагирование.
В нашем исходном примере, если бы мы хотели изменить количество столбцов в разных точках останова, нам пришлось бы пересчитать нашу ширину И изменить наши nth-child селекторы, чтобы очистить поля.
В нашем примере с gap все, что нам нужно сделать, это сбросить наш flex-basis, и все готово.
.flex-item {
flex: 1 1 100%; // 1 across at mobile
}
@media (min-width: 640px) {
.flex-item {
flex-basis: calc((100% / 2) - 1rem); // 2 across at tabletish
}
}
@media (min-width: 1024px) {
.flex-item {
flex-basis: calc((100% / 3) - 2rem); // 3 across at desktop
}
}
Не буду врать, я по-прежнему предпочитаю CSS Grid для подобного шаблона проектирования, но, надеюсь, вы увидите несколько вариантов использования этой удивительной новой функции.
Глядя в будущее
В настоящее время gap поддерживается только в Firefox. Вам нужно будет подождать, пока другие браузеры догонят. Будем надеяться, что они заметят проблемы разработчиков с и дадут нам эту возможность раньше, а не позже.
upd 2022