Свойство gap в CSS является сокращением для row-gapи column-gap, определяя размер промежутков, который представляет собой пространство между строками и столбцами в макетах сетки, гибкости и нескольких столбцов.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Используйте ползунок в демонстрации ниже, чтобы увидеть gapсвойство в действии:
Синтаксис
gap принимает одно или два значения:
- Одно значение устанавливает одно
row-gapиcolumn-gapто же значение. - Когда используются два значения, первое задает,
row-gapа второе -column-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )Спецификация модуля CSS Grid Layout определяет пространство между дорожками сетки с помощью grid-gapсвойства. gapпредназначен для его замены, чтобы пробелы можно было определять в нескольких методах компоновки CSS, таких как flexbox, но по- grid-gapпрежнему необходимо использовать в тех случаях, когда браузер, возможно, реализовал, grid-gapно еще не начал поддерживать новое gapсвойство.
Значения
gap принимает следующие значения:
normal: (По умолчанию) Браузер укажет используемое значение 1em для многоколоночного макета и 0px для всех других контекстов макета (например, сетки и гибкости).: Любая действительная и неотрицательная длина CSS, такие какpx,em,remи%, среди прочих.: Размер зазора в виде неотрицательного процентного значения по отношению к размеру элемента. (Подробнее см. Ниже.)initial: Применяет настройку свойства по умолчанию, то естьnormal.inherit: Принимает значение зазора родительского элемента.unset: Удаляет токgapиз элемента.
Процент в свойствах разрыва
Когда размер контейнера в измерении промежутка определен, gapразрешает процентное соотношение относительно размера поля содержимого контейнера в любых типах макета.
Другими словами, когда браузеру известен размер контейнера, он может вычислить процентное значение gap. Например, когда высота контейнера составляет 100 пикселей, а для параметра gapустановлено значение 10%, браузер знает, что 10% от 100 пикселей равно 10 пикселей.
Но когда браузер не знает размера, он задается вопросом: «10% чего?» В этих случаях gapведет себя по-разному в зависимости от типа макета.
В макете сетки проценты разрешаются относительно нуля для определения вкладов внутреннего размера, но разрешаются относительно поля содержимого элемента при компоновке содержимого поля, что означает, что он будет помещать пространство между элементами, но пространство не влияет на размер контейнера.
В этой демонстрации высота контейнера не определена. Посмотрите, что произойдет, когда вы увеличите gapразмер. Затем установите gapв пикселях и повторите попытку:
В гибком макете во всех случаях проценты разрешаются относительно нуля, что означает, что пробелы не будут применяться, если размер контейнера неизвестен браузеру:
Использование функции calc () с пробелом
Вы можете использовать calc()функцию, чтобы указать размер файла, gapно на момент написания этой статьи она не поддерживается в Safari и iOS.
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Примеры
gapСвойство предназначено для использования в сетевых, флекс и несколько колонок макетов. Давайте посмотрим на несколько примеров.
Макет сетки
В следующей демонстрации вы можете увидеть, как gapони используются для указания свойств row-gapи column-gapв контейнере сетки, определяя промежутки между строками сетки и столбцами сетки соответственно:
Макет Flex
Применение зазора к главной оси гибкого контейнера указывает расстояние между гибкими элементами в одной строке гибкого макета.
Здесь column-gapиспользуется в направлении строки:
Здесь row-gapиспользуется в направлении столбца:
Применение gapк поперечной оси гибкого контейнера указывает расстояние между гибкими линиями гибкого макета.
Вот row-gapнаправление по строке:
Вот column-gapв направлении столбца:
Многоколоночный макет
column-gapпоявляется в макетах с несколькими столбцами для создания промежутков между полями столбцов, но обратите внимание, что row-gapэто не имеет никакого эффекта, поскольку мы работаем только в столбцах. gapможно по-прежнему использовать в этом контексте, но column-gapбудет применяться только.
Как вы можете видеть в следующей демонстрации, хотя gapсвойство имеет значение 2rem, оно разделяет элементы только по горизонтали, а не в обоих направлениях, поскольку мы работаем в столбцах:
Чем больше ты знаешь…
При работе с gapнедвижимостью следует отметить несколько моментов .
Это хороший способ предотвратить нежелательные интервалы
Вы когда-нибудь использовали поля для создания промежутков между элементами? Если мы не будем осторожны, мы можем получить дополнительный интервал до и после группы элементов.
Решение этого обычно требует добавления отрицательных полей или обращения к псевдоселекторам для удаления поля с определенных элементов. Но самое приятное в использовании gapболее современных методов компоновки - это то, что у вас есть только пространство между элементами. Излишняя неразбериха в начале и в конце никогда не будет проблемой!
Но, эй, если вы хотите, чтобы вокруг предметов было пространство во время использования gap, поместите paddingконтейнер следующим образом:
.container ( display: flex; gap: 1rem; padding: 1rem; )Размер желоба не всегда равен величине зазора
gapСвойство не единственное , что может поставить пространство между элементами. Поля, отступы, justify-contentа align-contentтакже могут увеличивать размер желоба и влиять на фактическое gapзначение.
В следующем примере мы устанавливаем 1em, gapно, как вы можете видеть, между элементами гораздо больше места, что вызвано использованием распределенных выравниваний, таких как justify-contentи align-content:
Поддержка браузера
Функциональные запросы обычно являются хорошим способом проверить, поддерживает ли браузер определенное свойство, но в этом случае, если вы проверите gapсвойство во флексбоксе, вы можете получить ложное срабатывание, потому что функциональный запрос не будет различать режимы макета. Другими словами, он может поддерживаться в гибком макете, что дает положительный результат, но на самом деле он не поддерживается, если он используется в макете сетки.
Макет сетки
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| 12+ | Нет | 81+ | 84+ | 68+ |
Макет сетки со значениями calc ()
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | 84+ | 79+ | 84+ | Нет | 69+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| Нет | Нет | 81+ | 84+ | 68+ |
Макет сетки с процентным значением
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | 84+ | 79+ | 84+ | Нет | 69+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| Нет | Нет | 81+ | 84+ | 68+ |
Макет Flex
Спецификация для использования gapс flexbox в настоящее время находится в состоянии рабочего проекта.
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 84 | 63 | Нет | 84 | TP |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Нет | Нет |
Многоколоночный макет
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | 84+ | 79+ | 84+ | Нет | 69+ |
| iOS Safari | Opera Mobile | Браузер Android | Chrome для Android | Firefox для Android |
|---|---|---|---|---|
| Нет | Нет | 81+ | 84+ | 68+ |
Дополнительная информация
- Модуль выравнивания блока CSS, уровень 3
- Chromium устанавливает разрыв Flexbox (билет № 761904)
- Статус функции CSS WebKit
Связанный
- Макет сетки
- Макет Flexbox
- Макет с несколькими столбцами