column-count: текст, текущий через несколько колонок

Назначение

Column-count задаёт желаемое количество колонок в многоколоночном контейнере. Содержимое течёт из одной колонки в следующую, как в газетной полосе, а не распределяется независимыми карточками.

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

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

Пример

<style>.reading{column-count:1;column-gap:2rem}.reading p{margin-top:0}@media(min-width:42rem){.reading{column-count:2}}</style>
<div class="reading"><p>Первый абзац объясняет задачу и вводит термины. Читатель следует обычному порядку текста, переходя из верхней части первой колонки к её низу.</p><p>Продолжение переносится в следующую колонку. Здесь полезно проверить, достаточно ли широкие строки и удобно ли возвращаться глазами к началу продолжения.</p><p>Небольшой вывод завершает учебное объяснение.</p></div>

Что должно получиться

На широком окне текст распределяется в две колонки, на узком остаётся одна. Баланс высот зависит от объёма текста и алгоритма фрагментации браузера.

Граница применения и частая ошибка

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

Самостоятельная проверка

Добавьте длинный абзац и увеличьте размер текста. Проверьте направление чтения, перенос заголовка и отсутствие горизонтальной прокрутки страницы. Сравните результат с Grid, где каждый элемент остаётся отдельной ячейкой.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Модель отображения
• Переполнение
• Печать