Свойство CSS `row-gap`

row-gap — свойство CSS, задающее размер промежутка (межколонника) между строками элемента в многоколоночных макетах, гибких контейнерах и сетках.

Попробуйте

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

<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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Синтаксис

/* Keyword value */
row-gap: normal;

/* <length-percentage> value */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
row-gap: 10%;
row-gap: calc(10% - 6px);

/* <line-width> values */
row-gap: thin;
row-gap: medium;
row-gap: thick;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

Значения

Это свойство задаётся одним значением из следующего списка:

normal

Для многоколоночного макета разрешается в 1em; в остальных случаях — в 0. Это значение по умолчанию.

<line-width>

Задаёт размер промежутка с помощью ключевых слов thin, medium или thick либо положительного значения <length>.

<length-percentage>

Задаёт неотрицательное значение <length> или <percentage>. Процентные значения отсчитываются относительно блочного размера области содержимого или 0.

Описание

Свойство row-gap задаёт размер промежутка между строками элемента. В этом промежутке может находиться видимый разделитель — декоративная линия. Если между строками есть линия, она будет отображаться посередине промежутка, но не повлияет на его размер. Эти декоративные линии можно добавить в иное «пустое пространство» с помощью свойства row-rule или сокращённого свойства rule.

Согласно спецификации CSS gaps, это свойство можно использовать в многоколоночных макетах, гибких контейнерах и сетках. Свойство row-gap наряду со свойством column-gap также можно задать с помощью сокращённого свойства gap именно в таком порядке. Свойство row-gap заменило свойство grid-row-gap, которое применялось только в сеточных макетах CSS. Теперь grid-row-gap — это псевдоним row-gap.

Свойство задаёт промежуток фиксированной длины между элементами контейнера, разделяя блоки вдоль блочной оси контейнера. Отрицательные значения недопустимы. Значение по умолчанию normal разрешается в 1em для многоколоночных контейнеров и в 0 во всех остальных случаях.

Процентные значения вычисляются относительно размера области содержимого вдоль блочной оси контейнера, если этот размер определён, и относительно 0 в противном случае. Исключение составляет сеточный макет: циклические процентные размеры при вычислении вклада в внутренний размер разрешаются в ноль, но при размещении содержимого — относительно области содержимого элемента.

В сеточных макетах промежуток действует так, как если бы линии сетки между строками имели толщину, равную значению свойства: дорожка сетки между двумя строками — это пространство между соответствующими им промежутками. При расчёте размеров дорожек каждый промежуток считается дополнительной пустой дорожкой фиксированного размера, заданного этим свойством; такая дорожка охватывается любыми элементами сетки, которые занимают более одной строки. Хотя при расчёте размеров промежуток считается пустым, в нём может находиться row-rule.

Формальное определение

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

row-gap = 
  normal |
  <length-percentage>

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

Примеры

Гибкий макет

В этом примере показано, как использовать свойство row-gap для создания горизонтального пространства между соседними строками гибких элементов. Также показано, что размер row-gap не зависит от размера линии между строками.

HTML

Мы добавляем шесть элементов в контейнер:

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

CSS

Мы задаём свойству display значение flex, а свойству flex-flow — значение row wrap, чтобы создать гибкий контейнер со строками гибких элементов, которые при необходимости переносятся на новые строки. Также ограничиваем width значением 300px. Кроме того, добавляем row-rule, которая нарисует посередине промежутка пунктирную пурпурную линию шириной 30 пикселей.

Для гибкого контейнера задаётся значение 20px свойства row-gap, чтобы создать промежуток 20px между соседними гибкими строками.

Мы также задаём гибким элементам цвет фона, причём большинство элементов делают его полупрозрачным, чтобы показать, как линия видна под гибкими элементами, когда она шире промежутка.

#flexbox {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
  row-rule: 30px dashed magenta;

  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: #00ff0033;
  flex: 1 1 100px;
  height: 50px;
}
#flexbox > div:nth-of-type(3n-1) {
  background-color: lime;
}

Результат

Чтобы задать вертикальное пространство между гибкими элементами, укажите ненулевое значение свойства column-gap. При желании можно задать оба значения — row-gap и column-gap — с помощью сокращённого свойства gap.

Сеточный макет

В этом примере показано, как использовать свойство row-gap со значением <percentage> в сеточном макете.

HTML

Мы добавляем пять элементов в контейнер:

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

CSS

Мы задаём свойству display значение grid, свойству height — значение 240px, свойству width — значение 350px, а свойству grid-template-rows — значение repeat(3, 1fr), чтобы создать сеточный контейнер шириной 350 пикселей с тремя столбцами и необходимым количеством строк. Высота каждой строки составляет 100px, как задано свойством grid-template-rows.

Значение свойства row-gap задано как 5%. Высота контейнера составляет 240px. Значение 5% задаёт промежуток между строками высотой 12px, оставляя 216px для трёх строк элементов сетки, то есть высота каждой строки составляет 72px.

#grid {
  display: grid;
  height: 240px;
  width: 350px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 150px 1fr;

  row-gap: 5%;
}

body {
  padding: 1em;
}

#grid > div {
  outline: 1px solid green;
  background-color: lime;
}
@layer no-support {
  @supports not (row-gap: 5%) {
    body::before {
      content: "Your browser doesn't support percent values";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

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

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

См. также

• column-gap
• row-rule
• rule
• gap
• Основные понятия сеточного макета: промежутки
• Модуль CSS gaps