columns: 11em 3 combines column-width (an ideal minimum) and column-count (a maximum): the browser fits as many 11em columns as there is room for, up to three, so the layout adapts without media queries. column-gap and column-rule (styled like a border) separate the columns, column-span: all lets a heading cross them, and break-inside: avoid keeps a card or paragraph in one piece.
<style>
article { columns: 11em 3; column-gap: 24px; column-rule: 1px dotted #1565c0; }
h3 { column-span: all; margin: 0 0 6px; font-family: system-ui; }
p { margin: 0 0 6px; break-inside: avoid; font: 14px Georgia; }
</style>
<article><h3>Column layout since newspapers</h3>
<p>Short lines of 45 to 75 characters are easier to read than lines that span a wide screen.</p>
<p>The browser balances the text so that every column ends at a similar height.</p>
<p>Reduce the viewport and the article drops to two columns, then to one.</p></article>