column-gap

Промежуток между строками Широко поддерживается

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

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

Изначально являясь частью Многоколоночного макета, определение column-gap было расширено, чтобы включить несколько методов макета. Теперь, определённое в CSS выравнивании блоков, оно может использоваться в многоколоночном, гибком и сетковом макетах.

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

Попробовать

Синтаксис

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

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

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

Свойство column-gap задаётся одним из значений, перечисленных ниже.

Значения

normal: Используется стандартное расстояние между столбцами, задаваемое значением 1em для многоколоночного макета. Для всех других типов макета оно равно 0.
<length>: Размер промежутка между столбцами, определённый как <length>. Значение свойства <length> должно быть неотрицательным.
<percentage>: Размер промежутка между столбцами, определённый как <percentage>. Значение свойства <percentage> должно быть неотрицательным.

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

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

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

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

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

Примеры

Макет с гибкими блоками

В этом примере контейнер с гибкими блоками содержит шесть элементов с разными ширинами (200px и 300px), создавая элементы, которые не выстроены как сетка. Свойство column-gap используется для добавления горизонтального пространства между смежными элементами.

HTML

<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Для создания контейнера с гибкими блоками мы устанавливаем значение его свойства display в flex. Затем мы используем сокращённое свойство flex-flow для задания значения flex-direction в строку (по умолчанию) и flex-wrap в wrap, позволяя элементам с гибкими блоками переходить на новые строки при необходимости. По умолчанию элементы с гибкими блоками выстраиваются по всей высоте своего контейнера. Установка свойства height делает даже пустые элементы гибкими с высотой 100px.

Для лучшей демонстрации свойства column-gap, элементы с гибкими блоками в этом примере имеют два разных значения ширины. Ширина элементов с гибкими блоками задана внутри элементов с гибкими блоками <div>. Мы используем компонент flex-basis сокращённого свойства flex для установки ширины всех элементов с гибкими блоками в 200px. Затем мы выбираем каждый третий элемент с гибкими блоками, используя селектор :nth-of-type(3n), увеличивая их ширину до 300px.

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

.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

Результат

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

Макет с сеткой

HTML

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

CSS

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

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

Результат

Многоколоночный макет

HTML

<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>

CSS

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

Результат

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

Спецификация
CSS Модуль выравнивания блоков, уровень 3 # column-row-gap
CSS Модуль макета с сеткой, уровень 2 # gutters
CSS Модуль многоколоночного макета, уровень 1 # column-gap

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`column-gap`	1	12	1.5	11.1	3	18	4	11.1	2	1.0	4.4
`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
`multicol_context`	501	1212	52 1.5–74 В Firefox 3 и ранее значение по умолчанию для ключевого слова `normal` было `0`, а не `1em`.	371511.1–15	103	5018	524	371411.1–14	103	5.01.0	504.4

END_OF_DOCUMENT_MARKER

См. также

© 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/column-gap