row-gap

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с октября 2017 года.

Свойство row-gap CSS задает размер промежутка (промежутка) между строками элемента.

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

Попробуйте

Синтаксис

/* <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;

Значения

<length-percentage>: Это ширина промежутка, разделяющего строки. Значения <percentage> относительны к размеру элемента.

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

Начальное значение	`normal`
Применяется к	многоколоночным элементам, контейнерам flex, контейнерам сетки
Наследуется	нет
Проценты	относятся к соответствующему размеру области содержимого
Вычисленное значение	как указано, с абсолютизацией <length> и нормальным вычислением до нуля, за исключением многоколоночных элементов
Тип анимации	длина, процент или calc();

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

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

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

Примеры

Макет с гибкой компоновкой

HTML

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

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

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

CSS

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 150px 1fr;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Результат

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

Спецификация
Модуль CSS Box Alignment Level 3 # column-row-gap

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`row-gap`	47	16	52	34	10.1	47	52	34	10.3	5.0	47
`flex_context`	84	84	63	70	14.1	84	63	60	14.5	14.0	84
`grid_context`	6657	1616	6152	5344	1210.1	6657	6152	4743	1210.3	9.06.0	6657

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap