row-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 г.⁩.

СвойствоCSSrow-gap задаёт отступ (gutter) между рядами.

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

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

<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;}

Синтаксис

css

/* <length> values */row-gap: 20px;row-gap: 1em;row-gap: 3vmin;row-gap: 0.5cm;/* <percentage> value */row-gap: 10%;/* Global values */row-gap: inherit;row-gap: initial;row-gap: revert;row-gap: revert-layer;row-gap: unset;

Обратите внимание, чтоgrid-row-gap является псевдонимом для этого свойства.

Значения

<length-percentage>: Ширина отступа, разделяющего ряды.Процентные значения рассчитываются относительно размера грид-элемента.

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

Начальное значение	`normal`
Применяется к	multi-column elements, flex containers, grid containers
Наследуется	нет
Проценты	относятся к соответствующему размеру области содержимого
Обработка значения	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type	длина,проценты или calc();

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

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

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

Примеры

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

HTML

html

<div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS

css

#flexbox {  display: flex;  flex-wrap: wrap;  width: 300px;  row-gap: 20px;}#flexbox > div {  border: 1px solid green;  background-color: lime;  flex: 1 1 auto;  width: 100px;  height: 50px;}

Результат

Грид-раскладка

HTML

html

<div>  <div></div>  <div></div>  <div></div></div>

CSS

css

#grid {  display: grid;  height: 200px;  grid-template-columns: 200px;  grid-template-rows: repeat(3, 1fr);  row-gap: 20px;}#grid > div {  border: 1px solid green;  background-color: lime;}