Основные понятия многоколоночной компоновки

Многоколоночная компоновка отличается от других методов компоновки в CSS; она фрагментирует содержимое, включая все дочерние элементы, на колонки. Это происходит так же, как содержимое фрагментируется на страницы при работе с CSS-страничной средой, создавая таблицу стилей для печати.

В этом и последующих руководствах мы будем обсуждать следующие свойства, определённые в модуле CSS многоколоночной компоновки:

• column-width
• column-count
• columns сокращение
• column-rule-color
• column-rule-style
• column-rule-width
• column-rule сокращение
• column-span
• column-fill
• column-gap
• break-after
• break-before
• break-inside

Добавив свойство column-count или column-width к элементу, или используя сокращение columns, элемент становится контейнером многоколоночной компоновки или контейнером многоколонок для краткости. Колонки — это анонимные блоки; в спецификации они описываются как колоночные блоки.

Свойство column-count определяет количество колонок, в которых должно отображаться содержимое. Затем браузер назначит соответствующее количество места каждому колоночному блоку, чтобы создать запрашиваемое количество колонок.

В примере ниже мы используем свойство column-count для создания трёх колонок в элементе .container. Содержимое, включая дочерние элементы .container, затем распределяется между тремя колонками.

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

В приведённом выше примере содержимое заключено в теги абзаца <p> с базовой стилизацией. Поэтому сверху каждого абзаца есть отступ. Можно увидеть, как этот отступ приводит к сдвигу первой строки текста вниз. Это происходит потому, что контейнер многоколоночной компоновки создаёт контекст форматирования блоков (BFC), из-за чего отступы дочерних элементов не объединяются с любым отступом контейнера.

Свойство column-width используется для задания оптимальной ширины каждого колоночного блока. Если вы объявляете ширину колонки, браузер определит, сколько колонок такой ширины поместится в контейнер многоколоночной компоновки, и равномерно распределит любое дополнительное место между колонками. Следовательно, ширина колонки должна рассматриваться как минимальная ширина, поскольку колоночные блоки, вероятно, будут шире из-за дополнительного места.

В случае одной колонки с доступной шириной меньше значения column-width, колоночный блок уменьшится до размера, меньшего, чем объявленная ширина колонки.

В примере ниже свойство column-width установлено в значение 200px. Мы получаем столько колонок шириной 200 пикселей, сколько поместится в контейнер, при этом дополнительное место распределяется равномерно.

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

.container {
  column-width: 200px;
}

Если вы указываете оба свойства в контейнере многоколоночной компоновки, то column-count будет действовать как максимальное количество колонок. Следовательно, произойдёт описанное для column-width поведение, пока не будет достигнуто количество колонок в column-count. После этого больше колонок не будет отображаться, и дополнительное место распределяется равномерно между существующими колонками, даже если есть достаточно места для дополнительных колонок указанного размера column-width.

При совместном использовании свойств вы можете получить меньше колонок, чем указано в значении для column-count.

В следующем примере мы используем column-width из 200px и column-count из 2. Даже если есть место для более чем двух колонок, мы получаем две. Если места недостаточно для двух колонок по крайней мере 200 пикселей каждая, мы получаем одну.

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

.container {
  column-count: 2;
  column-width: 200px;
}

Можно использовать сокращение columns для задания значений column-count и column-width. Если вы указываете единицу длины, это значение будет использовано для column-width, а если вы указываете целое число, это значение будет использовано для column-count. Вы можете задать оба свойства, разделив значения пробелом.

Данный CSS даст тот же результат, что и в первом примере, со значением column-count равным 3.

.container {
  columns: 3;
}

Этот CSS даст тот же результат, что и в втором примере, со значением column-width равным 200px.

.container {
  columns: 200px;
}

Этот CSS даст тот же результат, что и в третьем примере, с заданными значениями для column-count и column-width.

.container {
  columns: 2 200px;
}

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