Одна из удобнейших частей спецификации CSS Grid — это grid-gap
. Это значительно упрощает создание «внутренних полей» для сеток.
Поля и хаки, которые мы делаем, чтобы очистить их в различных контекстах, долгое время были одним из основных раздражающих факторов в CSS. Отступы в гриде имели большой смысл.
Как оказалось, это имело большой смысл и для других. W3C рекомендовал перейти с grid-gap
на просто gap
и разрешить его во Flexbox и Multi-Column.
В этом руководстве мы рассмотрим, как мы добавляли поля в прошлом с помощью Flex и как gap
это делает тепрь, чтобы мы могли иметь эти внутренние поля без каких-либо хаков.
Поля в простой сетке Flexbox
В этом примере мы возьмем ряд блоков, используем Flexbox для создания стиля сетки, а затем разделим блоки через поля.
Мы начнем с базового HTML. А flex-container
и несколько flex-item
s.
<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