How to make multi-column text

Short answer

columns flows the text into several 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 sets the gap, and column-rule draws a line between the columns with the same syntax as border.

Columns by width

Instead of a number of columns you can give a preferred width — the browser decides how many fit. On a phone there will be one column:

.article { columns: 18em; }

A heading across all columns

column-span: all stretches an element across all the columns:

<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>

Common mistake

Columns on a long page make the reader scroll down, then back up to the top of the next column. Use them for short blocks that are visible in full, not for long articles.