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 October 2017.

Свойство gap CSS задаёт отступы между колонками и рядами. Является сокращением для свойств row-gap и column-gap.

Интерактивный пример

gap: 0;

gap: 10%;

gap: 1em;

gap: 10px 20px;

gap: calc(20px + 10%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <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 является псевдонимом для этого свойства.

Синтаксис

css
/* 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
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
  • row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
  • column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typeкак и у каждого из подсвойств этого свойства:

Формальный синтаксис

gap = 
  <'row-gap'> <'column-gap'>?  

<row-gap> = 
  normal                     |
  <length-percentage [0,∞]>  

<column-gap> = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Флексбокс-раскладка

HTML

html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

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

html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

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

html
<p class="content-box">
  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

css
.content-box {
  column-count: 3;
  gap: 40px;
}

Результат

Спецификации

Specification
CSS Box Alignment Module Level 3
# gap-shorthand

Совместимость с браузерами

Смотрите также