Как разбить текст на колонки как в газете

Короткий ответ

columns разливает текст по нескольким колонкам:

<div style="columns: 2; column-gap: 24px; column-rule: 1px solid silver;">
  <p style="margin-top: 0;">The city council met on Monday to discuss the new park. Residents asked for more trees, a playground and a quiet area for reading.</p>
  <p>Work will start in spring and should take about six months. The park will open to everyone free of charge.</p>
</div>

column-gap задаёт промежуток, column-rule — линию между колонками, синтаксис как у border.

Колонки по ширине

Число колонок можно не задавать, а указать желаемую ширину — браузер сам решит, сколько поместится. На телефоне останется одна колонка:

.article { columns: 18em; }

Заголовок на все колонки

column-span: all растягивает элемент над всеми колонками:

<div style="columns: 2;">
  <h3 style="column-span: all; margin: 0 0 8px;">Local news</h3>
  <p style="margin: 0;">Short news text split into two columns under one heading that spans both of them.</p>
</div>

Частая ошибка

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