CSS свойство gap
Определение и применение
Свойство gap задаёт промежутки между строками и столбцами.
grid-gap — совместимый старый псевдоним gap. В новом коде используйте
gap.
Промежуток создаётся только между соседними дорожками, линиями или элементами; отступа по внешним краям контейнера он
не добавляет. Видимое расстояние может увеличиться из-за margin или распределения свободного места.
Во Flexbox с row свойство column-gap разделяет элементы внутри линии, а
row-gap — линии. При column роли меняются: row-gap разделяет элементы,
column-gap — колонки.
При двух значениях первое задаёт row-gap, второе — column-gap. При одном значении оно
используется для обоих свойств.
Связанные свойства:
grid-template-columns,
grid-template-rows,
grid-auto-flow.
В генераторе Grid можно настроить дорожки и промежутки сетки и получить готовый CSS.
Попробуйте значения grid-gap
Промежутки между строками и столбцами Grid.
gap: 0
HTML и CSS примера
<div class="stage demo-target">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
gap: 0;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
gap: 8px;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
gap: 20px;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
gap: 8px 20px;
}
Сравнение при ltr и rtl: grid-gap
row-gap: 12px; column-gap: 24px;. По внешнему краю промежутка нет.
Выберите direction (направление письма). Во всех схемах задано
writing-mode: horizontal-tb (горизонтальное письмо, строки идут сверху вниз).
Смена direction меняет направление размещения элементов. Размеры промежутков между строками и столбцами
остаются прежними.
Поддержка браузерами
Спецификация: CSS gaps-1
Поддерживается во всех основных браузерах с 2018 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
| В grid-контейнере | 66 Версия 66 выпущена в 2018 г. Версия 57 выпущена в 2017 г. — Имя grid-gap | 16 Версия 16 выпущена в 2017 г. Версия 16 выпущена в 2017 г. — Имя grid-gap | 61 Версия 61 выпущена в 2018 г. Версия 52 выпущена в 2017 г. — Имя grid-gap | 53 Версия 53 выпущена в 2018 г. Версия 44 выпущена в 2017 г. — Имя grid-gap | 12 Версия 12 выпущена в 2018 г. Версия 10.1 выпущена в 2017 г. — Имя grid-gap | 66 Версия 66 выпущена в 2018 г. Версия 57 выпущена в 2017 г. — Имя grid-gap | 61 Версия 61 выпущена в 2018 г. Версия 52 выпущена в 2017 г. — Имя grid-gap | 47 Версия 47 выпущена в 2018 г. Версия 43 выпущена в 2017 г. — Имя grid-gap | 12 Версия 12 выпущена в 2018 г. Версия 10.3 выпущена в 2017 г. — Имя grid-gap | 9.0 Версия 9.0 выпущена в 2018 г. Версия 7.0 выпущена в 2018 г. — Имя grid-gap | 66 Версия 66 выпущена в 2018 г. Версия 57 выпущена в 2017 г. — Имя grid-gap | 12 Версия 12 выпущена в 2018 г. Версия 10.3 выпущена в 2017 г. — Имя grid-gap |
| calc() values | 66 | 16 | 52 | 53 | 12.1 | 66 | 52 | 47 | 12.2 | 9.0 | 66 | 12.2 |
| <percentage> values | 66 | 16 | 52 | 53 | 11 | 66 | 52 | 47 | 11 | 9.0 | 66 | 11 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Синтаксис
gap: <'row-gap'> <'column-gap'>?;
/* Глобальные значения */
gap: initial | inherit | unset | revert | revert-layer;
| разделяет варианты. ? означает необязательную часть. Типы в угловых скобках обозначают
допустимые значения из таблицы или соответствующих составляющих.
JavaScript:
element.style.gap="10px 20px";Начальное значение свойства
row-gap—normal;column-gap—normal.
Значения свойства
| Значение | Описание |
|---|---|
normal |
В Grid и Flexbox соответствует нулю; column-gap: normal в многоколоночной раскладке соответствует
1em.
|
<length-percentage> |
Неотрицательная длина или процент. Ноль допустим; отрицательные значения недопустимы. |
Два значения |
Например, gap: 12px 24px — 12px между строками и 24px между столбцами Grid. |
initial |
Устанавливает начальное значение свойства. |
inherit |
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства grid-gap устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
Наследуется
Нет.
Анимируемое
Как длина или процент при совместимых значениях; normal переключается дискретно.
Примеры, попробуйте сами
Дорожки и промежутки Grid
Поменяйте 8px и 20px местами. Первое значение задаёт промежуток между строками, второе — между столбцами.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Дорожки и промежутки Grid</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item target">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
style.css
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 20px;
}
Тони готовит пример…