В этой статье мы рассмотрим использование свойства CSS gap, которое упрощает добавление пробелов между элементами и решает ряд проблем макета, которые мучили разработчиков на протяжении многих лет.
Для чего gap For?
Свойство gap позволяет нам добавлять пространство между элементами по горизонтали и вертикали. marginКонечно, мы всегда могли сделать это с помощью. Но использование marginдля разделения элементов может быть проблемой — особенно когда элементы переходят через строки — потому что всегда есть последний элемент, который будет иметь нежелательные поля.
Следующий Pen показывает четыре div, разделенных правым и нижним полями:
article > div { margin: 0 10px 10px 0; }
Обратите внимание на фон контейнера, торчащий справа и снизу?
Свойство gapразмещает пространство только между элементами, что значительно упрощает компоновку. Вот тот же макет, что и выше, но на этот раз gapвместо margin:
article { display: grid; gap: 10px; }
Теперь у нас нет уродливого, нежелательного зазора справа и внизу. Зазор теперь только между предметами, и предметы плотно прилегают к своему контейнеру.
Мы можем использовать gapтри разных режима макета: Grid, Flexbox и multi-columns. Мы рассмотрим каждый по очереди ниже.
Рекомендации по использованию свойства gap
Использовать gapтак же просто, как писать gap: 10px. (Результат этого мы видели в приведенной выше демонстрации.) Но давайте посмотрим, что это значит.
Свойство gapможет принимать два значения: значение строки (то есть расстояние между строками элементов) и значение столбца (пространство между столбцами элементов): gap: <row-gap> <column-gap>.
Если мы укажем только одно значение, оно будет применяться к любым строкам и столбцам.
Мы можем просто указать разрыв столбца или строки отдельно с помощью свойств row-gapи column-gap.
Значения для gapмогут быть любыми единицами длины (такими как px, em, vw), процентными единицами или даже значениями, рассчитанными с помощью функции calc().
Как использовать свойство gap с CSS Grid
Выше мы видели пример gapиспользования с сеткой. Давайте попробуем другой пример с некоторыми другими единицами измерения:
article { display: grid; gap: 30px 1em; }
На этот раз у нас разные единицы измерения для строки и столбца.
Дополнительным бонусом gapявляется то, что он без проблем работает с адаптивными макетами. Если мы установим зазор между двумя элементами, этот зазор будет применяться независимо от того, расположены ли элементы рядом или один над другим, как показано на рисунке ниже.
Нажмите кнопку 0,5x в нижней части пера выше или откройте его в браузере и увеличьте и сузьте область просмотра, чтобы увидеть, как направление зазора адаптируется к расположению полей. Здесь мы выигрываем от единственного значения свойства gap, которое может применяться к строкам и столбцам. Если нам не нужен разрыв между строками на небольших экранах, мы могли бы вместо этого установить column-gap: 10px. Попробуйте это в Pen выше.
Чтобы узнать больше о том, как работать с макетами Grid, ознакомьтесь с нашим руководством для начинающих по макету CSS Grid.
Как использовать свойство gap с Flexbox
Когда Flexbox впервые появился на улицах, у него не было gapсобственности, поэтому нам пришлось прибегнуть к старому, мучительному использованию полей. К счастью, использование gapс Flexbox теперь широко распространено и хорошо поддерживается в современных браузерах.
Мы можем использовать его так же, как мы используем его для Grid:
article { display: flex; gap: 2vw 1vw; flex-wrap: wrap; }
В ситуациях, когда наши гибкие элементы реагируют на перенос, настройки зазора будут перестраиваться по мере необходимости и часто не будут выстраиваться как по вертикали, так и по горизонтали, как показано на рисунке ниже.
Если мы хотим, чтобы пробелы выровнялись по горизонтали и вертикали, лучше использовать сетку.
Как и в случае с сеткой, если нам нужны только промежутки между столбцами или строками, мы можем использовать column-gapи row-gapотдельно.
Как использовать свойство gap с многоколоночным макетом
Макет с несколькими столбцами упорядочивает содержимое в столбцы, но по умолчанию эти столбцы будут иметь промежуток, 1emустановленный браузером. Мы можем использовать это gapсвойство, чтобы установить предпочтительную ширину промежутка:
article { column-count: 2; gap: 3em; }
(Попробуйте удалить gapсвойство в Pen выше и посмотрите, что произойдет.)
Поскольку здесь мы работаем только со столбцами, применяется только значение промежутка между столбцами, поскольку нет строки, к которой можно было бы применить это значение.
Просто для удовольствия давайте также добавим вертикальную линию между этими столбцами:
article { column-count: 2; gap: 3em; column-rule: 1px solid #e7e7e7; }
Обратите внимание, что column-ruleэто сокращение для column-rule-width, column-rule-styleи column-rule-color.
Полезные сведения о свойстве gap
Свойство 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решает некоторые досадные проблемы, связанные с расстоянием между полями. Эти проблемы с полями также могут повлиять на такие вещи, как текст. Например, если мы размещаем текстовые элементы — такие как абзацы и заголовки — с нижним полем, мы получим нежелательное поле после последнего элемента, или, если мы используем верхнее поле, мы можем получить нежелательное верхнее поле на первый элемент. В CSS есть простые способы справиться с этим, но это все еще проблема, и некоторые разработчики решили использовать gapвместо этого.
Чтобы использовать gapдля размещения текстовых элементов, мы просто устанавливаем текстовый контейнер display: gridи добавляем gapзначение:
article { display: grid; gap: 1em; }
Элементы <h1>, <h2>и теперь являются элементами сетки <p>.<ul>.
Но должны ли мы это делать? Единственным недостатком является то, что интервалы одинаковы для всех элементов, и может быть более визуально привлекательным изменение интервалов между элементами, особенно вокруг заголовков. Однако использование gapдля этого по-прежнему интересная идея. Чтобы узнать об этом подробнее, посмотрите действительно интересное видео Кевина Пауэлла об использовании промежутков для отступов в тексте.
Заключение
Это gap свойство является удобным инструментом для размещения элементов друг от друга при использовании макетов Grid, Flexbox и с несколькими столбцами. Это избавляет нас от необходимости использовать старые грязные уловки с маржей. Его можно творчески использовать в дизайне, но не переусердствуйте!
