Колона-проліт - CSS-хитрощі

У макеті з декількома стовпцями можна змусити елементи розширюватися по колонках за допомогою column-span.

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

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

Значення column-spanможе бути allабо none.

Встановіть елемент, column-span: allщоб він охоплював стовпці.

Значенням noneвластивості є перемикач kill для охоплюючого елемента. Ви можете використовувати це під час роботи з медіа-запитами, щоб сказати елементу spanning припинити охоплення.

Див. Приклад розмаху стовпчика Перо від CSS-Tricks (@ css-tricks) на CodePen.

Підтримка браузера

Firefox цього не підтримує column-span, але є цікаві обхідні шляхи.

Ось підтримка багатокалонного макету загалом:

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.