Колонна-пролет - CSS-хитрости

В макете с несколькими столбцами вы можете заставить элементы расширяться по столбцам с помощью column-span.

h2 ( -webkit-column-span: all; column-span: all; )

Назначьте column-spanэлемент внутри многоколоночного макета, чтобы сделать его охватывающим элементом. Макет с несколькими столбцами возобновится со следующим не охватывающим элементом.

Значение column-spanможет быть allлибо none.

Установите элемент с помощью, column-span: allчтобы он охватил столбцы.

Значение noneсвойства - это аварийный выключатель для связующего элемента. Вы можете использовать это при работе с медиа-запросами, чтобы сообщить элементу span о прекращении охвата.

См. Пример Pen column-span от CSS-Tricks (@ css-tricks) на CodePen.

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

Firefox не поддерживает это column-span, но есть интересные обходные пути.

Вот общая поддержка многоколоночного макета:

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.