Перейти к содержанию

column-gap

Свойство column-gap задаёт расстояние между колонками в многоколоночном тексте.

Демо

Flexbox и выравнивание
Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* 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: unset;

Значения

Значение по-умолчанию: normal

Применяется к: колонкам, флексам, гридам

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

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

Примечания

Firefox поддерживает свойство -moz-column-gap.

Safari, Chrome и Аndroid поддерживают свойство -webkit-column-gap.

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

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

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

Flex

1
2
3
4
5
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

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

Grid

1
2
3
4
5
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#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;
}

Колонки

1
2
3
4
<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>

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

См. также

Комментарии