Охватывание и балансировка колонок

Чтобы элемент охватывал несколько колонок, используйте свойство column-span со значением all. Это сделает элемент охватывающим, охватывающим все колонки.

Любой дочерний элемент контейнера multicol может быть преобразован в охватывающий элемент, включая как прямые, так и косвенные дочерние элементы. Например, заголовок, вложенный непосредственно внутри контейнера, может стать охватывающим элементом, как и заголовок, вложенный в <section>, вложенный внутри контейнера multicol.

В примере ниже элемент <h2> задан значением column-span: all и охватывает все колонки.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
  <h2>A heading</h2>
  <p>
    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-width: 250px;
}

h2 {
  column-span: all;
  background-color: #4d4e53;
  color: #fff;
}

В этом втором примере заголовок находится внутри элемента <article>, но при этом всё ещё охватывает контент как ожидалось.

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
  <article>
    <h2>A heading</h2>
    <p>
      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>
  </article>
</div>

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

.container {
  column-width: 250px;
}

h2 {
  column-span: all;
  background-color: #4d4e53;
  color: #fff;
}

Когда вводится охватывающий элемент, он прерывает поток колонок; колонки возобновляются после охватывающего элемента, эффективно создавая новую группу колонок. Контент не перескакивает через охватывающий элемент.

Свойство column-span может иметь только два значения. Начальное значение none означает, что элемент не охватывает несколько колонок и остается внутри одной колонки. Значение all означает, что элемент охватывает все колонки. Нет значений, которые позволяют частично охватывать, например, заставлять элемент охватывать две из трёх колонок.

Если охватывающий элемент находится внутри другого элемента с отступами, отступами, границей или цветом фона, этот элемент может отображаться над охватывающим элементом, а остальной контент — под ним. По этой причине при установке элемента для охвата всех колонок необходимо учитывать эту ситуацию.

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

article {
  border: 1px solid red;
  padding: 10px;
}

.container {
  column-width: 250px;
}
h2 {
  background-color: #4d4e53;
  color: #fff;
  column-span: all;
}

Кроме того, если охватывающий элемент появляется позже в контенте, это может привести к неожиданному или нежелательному поведению, когда нет достаточного контента для создания колонок после охватывающего элемента. Используйте охватывание с осторожностью и тестируйте на различных точках разрыва, чтобы убедиться, что вы получаете ожидаемый эффект.

Сбалансированный набор колонок — это набор, в котором все колонки содержат примерно одинаковое количество контента. Заполнение и балансировка важны, когда количество контента не соответствует предоставленному пространству, например, когда для контейнера объявлен height.

Начальное значение для column-fill — balance. Значение balance означает, что все колонки сбалансированы по возможности. В фрагментированных контекстах, таких как страничная среда, сбалансирован только последний фрагмент. Это означает, что на последней странице сбалансирован окончательный набор колонок.

Другое значение для балансировки, balance-all, балансирует все колонки во фрагментированных контекстах.

В этом примере колонки содержат изображение и текст, которые сбалансированы. Изображение, которое не может разбиваться, находится в первой колонке. Остальные колонки сбалансированы, заполняясь равным количеством текста.

<div class="container">
  <img
    alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
  <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.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
h2 {
  background-color: #4d4e53;
  color: #fff;
}
img {
  max-width: 100%;
}
.container {
  column-width: 200px;
  column-fill: balance;
  height: 250px;
}

Значение auto для column-fill последовательно заполняет колонку, заполняя первую колонку в направлении inline-start, прежде чем помещать контент в последующие колонки, а не балансируя и заполняя все колонки равномерно. В этом примере мы изменили column-fill на auto. Колонки заполняются до высоты контейнера, оставляя пустые колонки в конце.

body {
  font: 1.2em / 1.5 sans-serif;
}
h2 {
  background-color: #4d4e53;
  color: #fff;
}
img {
  max-width: 100%;
}

.container {
  column-width: 150px;
  column-fill: auto;
  height: 250px;
}

В следующем руководстве вы узнаете как multicol обрабатывает переполнение в колонках и когда колонок больше, чем помещается в контейнер.