CSS-свойство `column-span`

CSS-свойство column-span CSS позволяет элементу занимать все колонки, если для него задано значение all.

Элемент, занимающий более одной колонки, называется элементом, охватывающим несколько колонок.

Попробуйте

column-span: none;

column-span: all;

<section id="default-example">
  <div class="multicol-element">
    <p>
      London. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall.
    </p>
    <div id="example-element">Spanner?</div>
    <p>
      Implacable November weather. As much mud in the streets as if the waters
      had but newly retired from the face of the earth, and it would not be
      wonderful to meet a Megalosaurus, forty feet long or so, waddling like an
      elephantine lizard up Holborn Hill.
    </p>
  </div>
</section>

.multicol-element {
  width: 100%;
  text-align: left;
  column-count: 3;
}

.multicol-element p {
  margin: 0;
}

#example-element {
  background-color: rebeccapurple;
  padding: 10px;
  color: white;
}

Синтаксис

/* Keyword values */
column-span: none;
column-span: all;

/* Global values */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

none

Элемент не занимает несколько колонок.

all

Элемент занимает все колонки. Содержимое в обычном потоке, расположенное перед элементом, автоматически распределяется по всем колонкам до появления элемента. Элемент создаёт новый контекст форматирования блоков.

Формальное определение

Формальный синтаксис

column-span = 
  none |
  all

Примеры

Заголовок, занимающий несколько колонок

В этом примере заголовок занимает все колонки статьи.

HTML

<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>

CSS

article {
  columns: 3;
}

h2 {
  column-span: all;
}

Результат

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

Совместимость с браузерами

См. также

• Занятие нескольких колонок и балансировка колонок
• Строчные элементы
• HTMLSpanElement