This page was translated from English by the community.Learn more and join the MDN Web Docs community.
gap (grid-gap)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since октябрь 2017 г..
СвойствоgapCSS задаётотступы между колонками и рядами. Являетсясокращением для свойствrow-gap иcolumn-gap.
Интерактивный пример
gap: 0;gap: 10%;gap: 1em;gap: 10px 20px;gap: calc(20px + 10%);<section> <div> <div> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </div></section>#example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr; width: 200px;}#example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue;}Обратите внимание, чтоgrid-gap является псевдонимом для этого свойства.
Синтаксис
/* One <length> value */gap: 20px;gap: 1em;gap: 3vmin;gap: 0.5cm;/* One <percentage> value */gap: 16%;gap: 100%;/* Two <length> values */gap: 20px 10px;gap: 1em 0.5em;gap: 3vmin 2vmax;gap: 0.5cm 2mm;/* One or two <percentage> values */gap: 16% 100%;gap: 21px 82%;/* calc() values */gap: calc(10% + 20px);gap: calc(20px + 10%) calc(10% - 5px);/* Global values */gap: inherit;gap: initial;gap: revert;gap: revert-layer;gap: unset;Свойство задаёт значение для<'row-gap'>, за которым может следовать значение для<'column-gap'>. Если<'column-gap'> опущено, то оно устанавливается в то же значение, что и<'row-gap'>.
<'row-gap'> и<'column-gap'> могут быть заданы как<length>, так и<percentage>.
Значения
<length>Размер отступа, разделяющего линии сетки.
<percentage>Размер отступа, разделяющего линии сетки, относительно размера грид-элемента.
Формальное определение
| Начальное значение | как и у каждого из подсвойств этого свойства:
|
|---|---|
| Применяется к | multi-column elements, flex containers, grid containers |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:
|
| Animation type | как и у каждого из подсвойств этого свойства: |
Формальный синтаксис
gap =
<'row-gap'><'column-gap'>?
<row-gap> =
normal|
<length-percentage [0,∞]>
<column-gap> =
normal|
<length-percentage [0,∞]>
<length-percentage> =
<length>|
<percentage>
Примеры
Флексбокс-раскладка
HTML
<div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>CSS
#flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px;}#flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px;}Результат
Грид-раскладка
HTML
<div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>CSS
#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px;}#grid > div { border: 1px solid green; background-color: lime;}Результат
Многоколоночная раскладка
HTML
<p> This is some multi-column text with a 40px column gap created with the CSS <code>gap</code> property. Don't you think that's fun and exciting? I sure do!</p>CSS
.content-box { column-count: 3; gap: 40px;}Результат
Спецификации
| Specification |
|---|
| CSS Box Alignment Module Level 3 # gap-shorthand |
Совместимость с браузерами
Смотрите также
- Похожие CSS-свойства:
row-gap,column-gap - Руководство по грид-раскладке:Основы грид-раскладки - Отступы