Flexbo saysMulti-column layout flows text into newspaper-style columns with column-count and column-gap.
column-count:3 (or column-width) flows a single block of text into balanced columns. column-gap spaces them and column-rule draws a divider. It's purpose-built for long-form reading, not page layout — content flows down then to the next column.
Power-ups you unlock
column-count or column-width define columns
column-gap spaces them; column-rule draws a divider
Text flows down then to the next column
For reading text, not page layout
The Float Phantom attacks — common mistakes
Using columns for app layout (use grid/flex)
Very tall columns forcing awkward scrolling
Content reflows unpredictably on resize
Boss battleFlow a long paragraph into 3 columns with a gap and a column-rule.
Example code
<!doctype html><html><head><meta charset="utf-8">
<style>.cols{column-count:3;column-gap:20px;column-rule:1px solid #2a1d4a;color:#e6e0ff}</style></head><body style="background:#06040d;padding:20px"><div class="cols">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></body></html>