Column gap css что это

Column gap css что это

Удобный способ задать отступы между элементами внутри гридов и флексбоксов.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 11 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Шорткат для записи значений свойств row — gap и column — gap . Значения разделяются пробелом. Работает как с гридами, так и с флексбоксами.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Указываете два значения размера в любых единицах измерения, разделяя их пробелом. Первым указывается значение отступа для рядов, за ним значение отступа для колонок.

Не обязательно указывать два значения. Браузер поймёт, даже если будет одно — оно задаст row — gap и column — gap .

Пример c гридами

Скопировать ссылку «Пример c гридами» Скопировано

 .grid-container  display: grid; grid-template-columns: 1fr 1fr; gap: 50px 10px;> .grid-container  display: grid; grid-template-columns: 1fr 1fr; gap: 50px 10px; >    Скопировать Скопировано Не удалось скопировать   

Пример с флексами

Скопировать ссылку «Пример с флексами» Скопировано

 .flex-container  display: flex; gap: 50px 10px;> .flex-container  display: flex; gap: 50px 10px; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Полный список свойств гридов можно посмотреть в гайде по grid.

Полный список свойств флексов можно посмотреть в гайде по flexbox.

• Chrome 66, поддерживается 66
• Edge 79, поддерживается 79
• Firefox 76, поддерживается 76
• Safari 12.1, поддерживается 12.1

Column gap css что это

Свойство gap устанавливает промежутки между строками и столбцами сетки. Это сокращение для row-gap и column-gap .

Демо¶

Flexbox и выравнивание

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/* One value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* One value */ gap: 16%; gap: 100%; /* Two values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* One or two 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: unset; 

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

Поддержка браузерами¶

gap для колонок (columns):

• Chrome 66+
• Edge 16+
• Firefox 61+

gap для Grid-раскладки:

• Chrome 66+
• Edge 16+
• Firefox 61+
• Safari 10.1+

gap для Flex-раскладки:

Can I Use flexbox-gap? Data on support for the flexbox-gap feature across the major browsers from caniuse.com.

Описание и примеры¶

Flex¶

1 2 3 4 5 6 7 8

div id="flexbox"> div>div> div>div> div>div> div>div> div>div> div>div> div> 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

Grid¶

 1 2 3 4 5 6 7 8 9 10 11

div id="grid"> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div>div> div> 

 1 2 3 4 5 6 7 8 9 10 11

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

См. также¶

• Свойство row-gap
• Свойство column-gap
• Руководство по Grid Layout

CSS свойство column-gap

Свойство column-gap определяет расстояние между колонками. Имеет две значения — normal и length. «Normal» — значение по умолчанию. «Gap» определяется единицами CSS (например, пикселах).

Могут быть добавлены некоторые свойства расширения, например -webkit- для Safari, Google Chrome и Opera (новые версии), -moz- для Firefox, -o- для старых версий Opera и т. д..

Значение по умолчанию	normal
Применяется	К многоколоночным элементам, флекс-контейнерам, грид-контейнерам.
Наследуется	Нет
Анимируемое	Да. Расстояние между колонками анимируемо.
Версия	CSS3
DOM синтаксис	object.style.columnGap = «100px»;

Синтаксис

column-gap: length | normal | initial | inherit;

Пример

html> html> head> title>Заголовок документа title> style> div < -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; -webkit-column-gap: normal; /* Chrome, Safari, Opera */ -moz-column-gap: normal; /* Firefox */ column-gap: normal; > style> head> body> h2>Пример свойства column-gap h2> div> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>

Пример, где расстояние между колонками установлено значением «length» (30px):

Пример

html> html> head> title>Заголовок документа title> style> div < -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; -webkit-column-gap: 30px; /* Chrome, Safari, Opera */ -moz-column-gap: 30px; /* Firefox */ column-gap: 30px; > style> head> body> h2>Пример свойства column-gap h2> div> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>

Значения

Значение	Описание
normal	Нормальное расстояние между колонками. Рекомендуемое значение — 1em. Значение по умолчанию.
length	Значение интервала между колонками в единицах CSS (например, пикселах).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

column-gap

Свойство column-gap устанавливает межколоночный интервал. Это достаточно универсальное свойство, которое может применяться в следующих ситуациях:

• определяет расстояние между колонками текста в многоколоночном макете;
• задаёт промежуток между колонками флекс-элементов;
• задаёт промежуток между колонками грид-элементов.

В ранних версиях спецификации Grid Layout (вёрстка с помощью гридов) это свойство называлось grid-column-gap . Для совместимости браузеры продолжают поддерживать это свойство как псевдоним column-gap .

Краткая информация

Значение по умолчанию	normal
Наследуется	Нет
Применяется	К многоколоночным элементам, флекс-контейнерам, грид-контейнерам
Анимируется	Да

Синтаксис

column-gap: | normal

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

<размер>Значение ширины межколоночного интервала в единицах CSS (например, пикселях). normal Межколоночный интервал устанавливается браузером автоматически.

Песочница

div < display: flex; column-gap: >px; >

Пример