CSS multicol без горизонтального скролла — зачем Chrome добавил column-wrap и column-height

Chrome добавил поддержку новых свойств CSS Multi-column Layout — column-wrap и column-height. Они решают старую проблему многоколоночной вёрстки: когда контент не помещается по высоте, браузер может не создавать горизонтальный скролл, а переносить лишние колонки на новую строку.

Почему у CSS multicol вообще была проблема

CSS Multi-column Layout, или просто multicol, — это механизм CSS, который позволяет разбивать поток текста на несколько колонок, как в газетах, журналах или некоторых справочных интерфейсах. Для этого обычно используют свойства вроде column-count, column-width, column-gap и columns.

Например:

.article {
  column-width: 280px;
  column-gap: 32px;
}

Такой код говорит браузеру: «Разбей текст на колонки шириной примерно 280 пикселей и оставь между ними промежуток 32 пикселя».

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

Например, если нужно сделать блок высотой с экран:

.article {
  column-width: 280px;
  height: 100vh;
}

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

Именно эту проблему описывает Chrome for Developers: до Chrome 145 при ограниченной высоте multicol-контейнера контент, который не помещался, создавал дополнительные колонки в inline-направлении, что могло приводить к горизонтальной прокрутке. developer.chrome.com

Что изменили column-wrap и column-height

Новые свойства позволяют управлять не только шириной, но и высотой колонок.

Главная идея простая:

column-height задаёт высоту одного ряда колонок;
column-wrap разрешает переносить переполненные колонки на новую строку;
вместо бесконечного роста вправо колонки могут продолжаться ниже.

То есть раньше браузер вёл себя примерно так:

[колонка 1] [колонка 2] [колонка 3] [колонка 4] [колонка 5] →

А с переносом колонок логика становится ближе к такой:

[колонка 1] [колонка 2] [колонка 3]
[колонка 4] [колонка 5] [колонка 6]

Это важное отличие. Контент всё ещё остаётся многоколоночным, но лишние колонки больше не обязаны вылезать вправо за пределы видимой области.

Chrome указывает, что column-height и column-wrap позволяют задать высоту ряда колонок и переносить переполненные колонки в новый ряд в блочном направлении.

Простой пример использования

Базовый пример может выглядеть так:

.article {
  column-width: 280px;
  column-gap: 32px;
  column-height: 80vh;
  column-wrap: wrap;
}

Что здесь происходит:

column-width: 280px задаёт примерную ширину колонок;
column-gap: 32px задаёт расстояние между колонками;
column-height: 80vh ограничивает высоту одного ряда колонок;
column-wrap: wrap разрешает переносить лишние колонки на следующий ряд.

В итоге длинный текст не должен растягивать раскладку вправо до появления горизонтального скролла. Вместо этого браузер создаёт следующий ряд колонок ниже.

Почему это полезно для интерфейсов

На первый взгляд кажется, что это небольшая CSS-фича. Но на практике она закрывает несколько реальных сценариев.

Длинные тексты в ограниченной области

Например, у вас есть справочный блок, инструкция, текстовый каталог, юридическое описание или страница документации. Дизайнер хочет показать текст в колонках, чтобы строки были короче и легче читались.

Но если высота блока ограничена, раньше приходилось выбирать между плохими вариантами:

разрешить горизонтальный скролл;
отказаться от колонок;
писать JavaScript для ручного разбиения контента;
использовать сложную сетку вместо естественного текстового потока.

column-wrap и column-height дают более нативное CSS-решение.

Интерфейсы на весь экран

Новые свойства могут быть полезны для экранных макетов, где блок должен занимать фиксированную высоту: например, 100vh, 80vh или высоту карточки.

Chrome отдельно отмечает сценарий «block direction carousel»: ряды колонок могут заполнять доступную высоту экрана, а следующий ряд читается после вертикальной прокрутки.

Это может пригодиться для:

интерактивных лонгридов;
каталогов;
обучающих материалов;
справочников;
документации;
чтения текстов в журнальном стиле.

Меньше JavaScript для layout-задач

До появления таких возможностей разработчики часто пытались имитировать подобное поведение с помощью JavaScript: измеряли высоту блоков, разбивали текст, перестраивали DOM, пересчитывали всё при изменении размера экрана.

Это сложный и хрупкий путь. Любое изменение шрифта, ширины контейнера или размера окна может ломать расчёты.

Нативная CSS-функция лучше тем, что браузер сам занимается раскладкой текста.

Как работает column-wrap

Свойство column-wrap управляет тем, что происходит с колонками, когда они переполняют доступное пространство.

По MDN, у column-wrap есть значения:

column-wrap: auto;
column-wrap: nowrap;
column-wrap: wrap;

Значение по умолчанию — auto. Важный момент: если задано column-height со значением длины, auto фактически ведёт себя как wrap; если column-height равно auto, то column-wrap: auto ведёт себя как nowrap.

Проще говоря, во многих случаях достаточно задать только column-height, и браузер уже сможет включить перенос колонок. Но для читаемости кода и явного намерения лучше указывать оба свойства:

.content {
  column-width: 18rem;
  column-height: 70vh;
  column-wrap: wrap;
}

Так следующий разработчик сразу поймёт: перенос колонок здесь нужен специально.

Как работает column-height

column-height задаёт высоту колонок в многоколоночном контейнере.

Пример:

.text {
  column-width: 300px;
  column-height: 500px;
  column-wrap: wrap;
}

Это означает: каждая колонка должна иметь высоту 500 пикселей, а когда ряд колонок заполнится, лишний контент можно перенести на следующий ряд.

MDN описывает column-height как свойство, которое вместе с column-wrap позволяет задать высоту колонок и переносить их на новый ряд, когда достигнут край контейнера.

Что было раньше и что стало теперь

Ситуация	Раньше	С `column-wrap` и `column-height`
Контент не помещается по высоте	Новые колонки могли уходить вправо	Колонки могут переноситься вниз
Горизонтальный скролл	Возможен	Можно избежать
Чтение длинного текста	Пользователь мог скроллить вбок	Пользователь скроллит страницу привычно вниз
Управление высотой колонок	Ограниченное	Появляется отдельное свойство `column-height`
JavaScript-обходы	Часто требовались для сложных случаев	В части сценариев можно обойтись CSS

Где это использовать

Эта функция подходит не для всех типов вёрстки. Её не стоит рассматривать как замену Grid или Flexbox.

multicol полезен, когда у вас есть именно потоковый текст или однотипный контент, который должен естественно перетекать из колонки в колонку.

Хорошие сценарии:

статья с газетной раскладкой;
справочный текст;
список терминов;
инструкция;
документация;
каталог небольших текстовых элементов;
полноэкранный блок чтения.

Плохие сценарии:

сложная сетка карточек;
интерфейс с независимыми блоками;
dashboard;
masonry-галерея;
layout, где важен точный порядок элементов по строкам.

Для таких задач лучше использовать CSS Grid, Flexbox или специализированную masonry-логику.

Почему это не полноценная замена Grid

Важно понимать разницу.

CSS Grid размещает элементы в сетке. Каждый дочерний элемент — отдельная единица раскладки.

CSS multicol работает иначе: он берёт один поток контента и разливает его по колонкам. Это больше похоже на текст в газете, чем на сетку карточек.

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

Поэтому column-wrap не делает из multicol новый Grid. Он просто исправляет слабое место многоколоночной раскладки: поведение при переполнении по высоте.

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

Главное ограничение — поддержка.

Chrome заявил поддержку column-wrap и column-height начиная с Chrome 145.

MDN помечает column-wrap и column-height как экспериментальные технологии и рекомендует внимательно проверять таблицы совместимости перед использованием на рабочих сайтах.

Поэтому на продакшене стоит использовать прогрессивное улучшение через @supports.

Например:

.article {
  column-width: 280px;
  column-gap: 32px;
}

@supports (column-height: 80vh) and (column-wrap: wrap) {
  .article {
    column-height: 80vh;
    column-wrap: wrap;
  }
}

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

Что важно учесть разработчику

1. Не используйте без проверки совместимости

Пока свойства экспериментальные, нельзя строить на них критически важную часть интерфейса без fallback-сценария.

2. Не прячьте контент

Если контейнер ограничен по высоте, убедитесь, что пользователь всё равно может прочитать весь текст. Перенос колонок должен улучшать доступность, а не превращать страницу в ловушку.

3. Проверяйте мобильные экраны

На узких экранах многоколоночная раскладка часто вообще не нужна. Лучше отключать её через media queries:

.article {
  column-width: 280px;
  column-gap: 32px;
}

@media (max-width: 700px) {
  .article {
    columns: auto;
    column-height: auto;
    column-wrap: auto;
  }
}

4. Не применяйте multicol к сложным карточкам без необходимости

Если элементы должны сохранять визуальную независимость, лучше использовать Grid. Multicol хорош именно для потока.

Почему эта CSS-фича важнее, чем кажется

Современный CSS постепенно закрывает задачи, для которых раньше требовались хаки, JavaScript или тяжёлые layout-библиотеки. column-wrap и column-height — хороший пример такого движения.

Это не «революция во всей вёрстке», но важное улучшение конкретного механизма. Многоколоночная раскладка становится предсказуемее, особенно в интерфейсах с ограниченной высотой.

Для разработчика это означает меньше костылей. Для пользователя — меньше неожиданных горизонтальных скроллов. Для дизайнера — больше контроля над текстовыми блоками.

Итог

column-wrap и column-height делают CSS multicol более практичным для современных интерфейсов. Теперь многоколоночный текст можно не только раскладывать в ширину, но и переносить на новые ряды, избегая горизонтального переполнения.

Использовать эти свойства уже можно для экспериментов, демо, внутренних интерфейсов и progressive enhancement. Но для массового продакшена их стоит внедрять осторожно: через @supports, с проверкой совместимости и нормальным fallback.