Стилевые настройки колонок

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

Начальное значение column-gap равно 1em, что предотвращает столкновение колонок. В других методах макета column-gap поддерживается как синоним для gap, но с начальным значением 0. Значение ключевого слова normal устанавливает column-gap в начальное значение.

Вы можете изменить промежуток, используя любое значение <length>. В примере ниже column-gap установлено в значение 40px.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
    purslane kale. Celery potato scallion desert raisin horseradish spinach
    carrot soko.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

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

Допустимое значение для column-gap — <length-percentage>, что означает, что проценты разрешены. Значения процентов для column-gap рассчитываются как процент от ширины контейнера с множественными колонками.

Спецификация определяет column-rule-width, column-rule-style и column-rule-color, предоставляя сокращенное свойство column-rule. Эти свойства работают точно так же, как и свойства border: любой <line-style> может быть использован как column-rule-style, как и для допустимых border-style.

Эти свойства применяются к элементу, который является контейнером multicol, и поэтому все колонки будут иметь одинаковое правило. Правила рисуются только между колонками, а не на внешних краях. Правила рисуются только между колонками, содержащими контент.

В этом примере создано пунктирное правило шириной 5 пикселей и цветом rebeccapurple с использованием длинных значений.

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-rule-width: 5px;
  column-rule-style: dotted;
  column-rule-color: rebeccapurple;
}

Обратите внимание, что само правило не занимает никакого места: широкое правило не будет раздвигать колонки, чтобы создать место для правила. Вместо этого правило накладывается на промежуток.

В приведенном ниже примере используется очень широкое правило 40px и промежуток 10px. Правило отображается под содержимым колонок. Чтобы создать место с обеих сторон правила, промежуток необходимо увеличить, чтобы он был больше, чем 40px.

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-count: 3;
  column-gap: 10px;
  column-rule: 40px solid rebeccapurple;
}

В этой статье подробно описаны все текущие способы стилизации ящиков колонок. В следующем руководстве мы рассмотрим возможность размещения элементов внутри контейнера по всем колонкам.