Свойство CSS column-gap
Свойство column-gap задаёт размер промежутка между столбцами. Узнайте о значениях и примерах использования.
Свойство CSS column-gap задаёт размер промежутка (отступа) между соседними столбцами. Оно работает в трёх различных контекстах макета: в многоколоночных макетах, созданных с помощью column-count, в контейнерах flex и в контейнерах grid. В Flexbox и CSS Grid это современная половина сокращения gap, заменяющая устаревшее свойство grid-column-gap.
На этой странице рассматриваются синтаксис свойства, допустимые значения, его поведение в каждом контексте макета, а также особенности использования процентных значений и свойства column-rule.
column-gap — одно из свойств CSS3.
Что оно делает
В многоколоночном макете браузер размещает содержимое в нескольких столбцах. По умолчанию столбцы разделены промежутком normal (1em для многоколоночных элементов). column-gap позволяет заменить это значение по умолчанию любым значением длины, чтобы сузить или расширить отступ в соответствии с вашим дизайном.
Свойство принимает ключевое слово normal или значение <length>:
normal— значение по умолчанию. Для многоколоночных макетов разрешается в1em. Для контейнеров flex и grid разрешается в0.<length>— фиксированный промежуток, например30px,2emили1rem. Отрицательные значения не допускаются.<percentage>— промежуток относительно ширины элемента.
Свойство также поддерживает стандартные ключевые слова initial и inherit.
Вендорные префиксы (-moz-column-gap, -webkit-column-gap) больше не требуются для современных браузеров. Нативная поддержка доступна во всех основных браузерах.
Где располагается column-rule
Когда между столбцами отрисовывается column-rule, оно располагается в середине промежутка и не занимает дополнительного пространства. Если увеличить column-gap, разделитель остаётся по центру с большим свободным пространством с каждой стороны; если промежуток слишком мал, толстый разделитель может визуально перегрузить текст.
column-gap и gap, grid-column-gap
В контейнерах flex и grid column-gap является горизонтальной половиной сокращения gap: gap: <row-gap> <column-gap>. Устаревшее свойство grid-column-gap выполняет ту же задачу в grid, но является устаревшим — предпочтительно использовать column-gap.
| Начальное значение | normal |
|---|---|
| Применяется к | Многоколоночным элементам, контейнерам flex, контейнерам grid. |
| Наследуется | Нет. |
| Анимируется | Да. Длина промежутка между столбцами анимируется. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.columnGap = "100px"; |
Синтаксис
Синтаксис свойства CSS column-gap
column-gap: length | normal | initial | inherit;Пример свойства column-gap:
Пример свойства CSS column-gap со значением normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: normal;
}
</style>
</head>
<body>
<h2>The column-gap property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Результат
При column-gap: normal четыре столбца разделены промежутком 1em по умолчанию.
Пример свойства column-gap со значением «length»:
Здесь задаётся явный промежуток 30px, обеспечивающий большее расстояние между столбцами, чем значение normal по умолчанию.
Пример свойства CSS column-gap со значением length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
}
</style>
</head>
<body>
<h2>Column-gap property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Использование column-gap во flex и grid
То же свойство управляет горизонтальным промежутком между flex-элементами и между столбцами сетки. В этих контекстах оно обычно задаётся через сокращение gap, но column-gap самостоятельно полностью поддерживается:
/* Flex container: 24px between items in a row */
.flex {
display: flex;
column-gap: 24px;
}
/* Grid: 16px between columns, 8px between rows */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 16px;
row-gap: 8px;
}Обратите внимание, что в flex и grid значение column-gap по умолчанию равно 0, тогда как в многоколоночном макете значение normal по умолчанию равно 1em.
Процентные значения
Процентный промежуток вычисляется относительно ширины элемента, а не ширины столбца:
div {
column-count: 3;
column-gap: 5%; /* 5% of the element's width */
}Поскольку процентные значения зависят от ширины контейнера, промежуток увеличивается и уменьшается при изменении размеров макета — удобно для гибких дизайнов, но сложнее предсказать, чем фиксированное значение в px.
Значения
| Значение | Описание |
|---|---|
| normal | Размер промежутка между столбцами по умолчанию. |
| length | Задаёт длину промежутка между столбцами. Может быть указана в em, px или процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- column-count — задаёт количество столбцов, на которые разбивается содержимое.
- column-width — указывает оптимальную ширину каждого столбца.
- columns — сокращение для
column-widthиcolumn-count. - column-rule — рисует линию внутри промежутка между столбцами.
- grid-gap — сокращение
gapдля задания промежутков между строками и столбцами в grid.