Справочник · CSS

column-count: текст в несколько колонок

Свойство делит содержимое на колонки, как в газете. Заголовок карточки так делить обычно не нужно.

Как это работает

column-count задаёт число колонок, column-gap — промежуток. Баланс высоты браузер ищет сам. На узком экране верни одну колонку, иначе строка станет из двух слов. column-span: all у заголовка может растянуть его над колонками, но поддержка и смысл стоит проверить. Для карточек сайта это свойство хуже грида: карточки не должны перетекать из колонки в колонку.

@media (min-width: 50rem) {
  .essay { column-count: 2; column-gap: 2rem; }
}

Когда использовать

Длинная заметка на широком экране. Меню, формы и каталог раскладывай flex или grid.

Частые ошибки

• На телефоне остались две узкие колонки.
• Заголовок разрезало пополам.
• Карточки каталога перетекают, и их нельзя прочитать по одной.