Как использовать CSS свойство gap

• Для чего нужен gap
• Рекомендации по использованию свойства gap
• Как использовать свойство gap в CSS Grid
• Как использовать CSS свойство gap в Flexbox
• Как использовать CSS свойство gap в многоколоночном макете
• Полезные вещи, которые нужно знать о CSS свойстве gap
  • Почему бы не задать отступ всем элементам с gap
• Подведение итогов

Для чего нужен gap

CSS свойство gap позволяет добавить свободное пространство между элементами по горизонтали и вертикали. Конечно, мы всегда могли делать это с помощью margin. Но использование margin при добавлении зазора между элементами может быть неприятным — особенно когда элементы располагаются через строку — потому что всегда есть последний элемент, который будет иметь нежелательный зазор.

В следующем примере показаны четыре div, отделённые друг от друга правым и нижним отступами:

article > div {
  margin: 0 10px 10px 0;
}

See the Pen

Заметили фон контейнера, торчащий справа и снизу?

CSS свойство gap размещает отступы только между элементами, что значительно упрощает вёрстку. Вот тот же макет, что и выше, но на этот раз с использованием gap вместо margin:

article {
  display: grid;
  gap: 10px;
}

See the Pen

Теперь у нас нет некрасивого, нежелательного отступа справа и снизу. Теперь отступ находится только между элементами, а сами элементы плотно прилегают к своему контейнеру.

Мы можем использовать gap с тремя различными режимами вёрстки: Grid, Flexbox и многоколоночном макете. Далее мы рассмотрим каждый из них по очереди.

Рекомендации по использованию свойства gap

Использовать gap очень просто — достаточно написать gap: 10px. (Результат этого мы видели в демонстрации выше) Но давайте посмотрим, что это означает.

CSS свойство gap может принимать два значения: значение строки (то есть пространство между строками элементов) и значение столбца (пространство между столбцами элементов): gap: <row-gap> <column-gap>.

Если мы укажем только одно значение, оно будет применяться к строкам и столбцам.

Мы можем указать отступ между столбцами или строками отдельно с помощью свойств row-gap и column-gap.

Значениями для gap могут быть любые единицы длины (например, px, em, vw), процентные значения или даже значения, вычисленные функцией calc().

Как использовать свойство gap в CSS Grid

Выше мы рассмотрели пример использования gap с макетом Grid. Давайте рассмотрим другой пример с различными значениями row-gap и column-gap:

article {
  display: grid;
  gap: 30px 1em;
}

See the Pen

На этот раз у нас разные значения для строки и столбца.

Дополнительный бонус gap заключается в том, что он легко работает в отзывчивых макетах. Если мы зададим отступ между двумя элементами, то этот отступ будет применяться независимо от того, расположены ли элементы рядом или один над другим, как показано в примере ниже.

See the Pen

Сузьте и расширьте область просмотра, чтобы увидеть, как направление отступа изменяется в зависимости от расположения ячеек. Здесь нам помогает одно значение свойства gap, которое может применяться как к строкам, так и к столбцам. Если нам не нужен зазор между строками на маленьких экранах, мы можем вместо этого установить column-gap: 10px. Попробуйте сделать это в примере кликнув на Edit on CODEPEN в правом верхнем углу.

Как использовать CSS свойство gap в Flexbox

Когда Flexbox только появился, в нем не было свойства gap, поэтому нам приходилось прибегать к извечному и мучительному использованию отступов. К счастью, использование gap в Flexbox широко распространено и хорошо поддерживается в современных браузерах.

Сейчас мы можем использовать его так же, как и в Grid:

article {
  display: flex;
  gap: 2vw 1vw;
  flex-wrap: wrap;
}

See the Pen

В ситуациях, когда наши flex-элементы отзывчиво переносятся, настройки отступа будут меняться по мере необходимости и часто не будут выравниваться по вертикали и горизонтали, как это показано в примере ниже (вы можете изменять размер окна перемещая нижний правый угол).

See the Pen

Если требуется, чтобы отступы выстраивались по горизонтали и вертикали, лучше использовать Grid.

Как и в случае с Grid, если нам нужны только отступы между столбцами или строками, мы можем использовать column-gap и row-gap по отдельности.

Как использовать CSS свойство gap в многоколоночном макете

Многоколоночная вёрстка организует содержимое в колонки, но по умолчанию между колонками будет отступ в 1em, установленный браузером. Мы можем использовать CSS свойство gap, чтобы задать желаемую ширину отступа:

article {
  column-count: 2;
  gap: 3em;
}

See the Pen

(Попробуйте удалить свойство gap в выше приведённом Pen и посмотрите, что получится).

Поскольку здесь мы работаем только с колонками/столбцами, применяется только значение отступа между столбцами, поскольку нет строки, к которой можно было бы применить это значение.

Просто для развлечения добавим вертикальную линию между колонками/столбцами:

article {
  column-count: 2;
  gap: 3em;
  column-rule: 1px solid #e7e7e7;
}

See the Pen

Обратите внимание, что column-rule — это сокращение для column-rule-width, column-rule-style и column-rule-color.

Полезные вещи, которые нужно знать о CSS свойстве gap

CSS свойство gap для Grid макетов первоначально называлось grid-gap, а в не сокращённой форме grid-row-gap и grid-column-gap. Хотя эти свойства все ещё работают, лучше придерживаться использования gap, так как теперь оно работает с Grid, Flexbox и многоколоночными макетами.

В многоколоночных макетах есть более старое свойство column-gap, которое тоже работает. Но опять, проще просто использовать свойство gap во всех сценариях.

Значение gap можно задать в %, но в процентах от чего? На самом деле это зависит от множества факторов, и предсказать это бывает довольно сложно. Вы можете подробнее изучить этот вопрос в спецификации. Как правило, если вы не знаете, что делаете, лучше избегать процентных значений в gap.

Такие свойства выравнивания, как justify-content и align-content, также служат для разнесения элементов в макетах Grid и Flexbox, и при определённых обстоятельствах они разместят элементы дальше, чем ваше значение gap. Однако значение gap все равно полезно, поскольку оно, по крайней мере, обеспечивает минимальное пространство между элементами на небольших экранах.

Почему бы не задать отступ всем элементам с gap

Как отмечалось выше, gap решает некоторые раздражающие проблемы, связанные с отступом. Эти проблемы с полями также могут влиять на такие вещи как текст. Например, если мы размещаем текстовые элементы — такие, как абзацы и заголовки — с нижним отступом, мы получим нежелательный отступ после последнего элемента, или если мы используем верхний отступ, мы можем получить нежелательный верхний отступ на первом элементе. В CSS есть простые способы решить эту проблему, но это все равно неприятно, и некоторые разработчики решили использовать вместо этого gap.

Чтобы использовать gap для отступов текстовых элементов, мы просто устанавливаем для текстового контейнера значение display: grid и добавляем значение gap:

article {
  display: grid;
  gap: 1em;
}

Элементы <h1>, <h2>, <p> и <ul> теперь являются grid-элементами.

See the Pen

Но стоит ли это делать? Один из недостатков заключается в том, что отступ между элементами одинаковый для всех элементов, и может быть более визуально привлекательным, если отступы между элементами будут разными, особенно вокруг заголовков. Тем не менее использование gap для этого — интересная идея. Чтобы узнать об этом больше, посмотрите очень интересное видео Kevin Powell об использовании gap для выравнивания текста.

Подведение итогов

Свойство gap — это удобный инструмент для создания отступов между элементами при использовании Grid, Flexbox и многоколоночных макетов. Он избавляет нас от необходимости использовать старые хаки с margin. Его можно креативно использовать во всем макете, но не переборщите с ним!

• Gap Shorthand: the gap property
• gap (grid-gap)