CSS Multi-column Layout Generator
What multi-column layout does
Multi-column layout flows a single block of text into several columns, the way a newspaper does. It is the one layout system where content moves from the bottom of one column to the top of the next automatically, which neither flexbox nor grid will do.
Syntax
columns: <width> <count>; column-gap: <length>; column-rule: <width> <style> <color>;| Part | What it controls |
|---|---|
| column-count | A fixed number of columns, regardless of how wide the container gets. |
| column-width | An ideal width instead. The browser fits as many columns as will hold it, which makes the layout responsive with no breakpoints. |
| columns | The shorthand for both. Give a width and a count and the count acts as a maximum. |
| column-gap | Space between columns. The default is 1em, which is usually too tight for comfortable reading. |
| column-rule | A divider line drawn in the gap. It takes no space of its own, exactly like a border's style syntax. |
| column-span: all | Lets a heading break out across every column, which is what makes the layout read like a real article. |
Notes from practice
Use column-width for responsive columns
Setting column-width: 18rem lets the browser decide the count from the space available. column-count alone squeezes three columns onto a phone.
Control the breaks
break-inside: avoid on a figure, card or blockquote stops it being split across a column boundary, which otherwise looks like a bug.
Tall columns hurt reading on screen
Newspaper columns work on paper because the eye travels a short distance. On a page that scrolls, long columns force the reader back up to the top for every one — keep them short or use a single column.
CSS Multi-column Layout Generator FAQ
How do I create newspaper-style columns in CSS?
Set columns on the container, for example columns: 18rem 3, which aims for 18rem-wide columns up to a maximum of three. The text then flows from the bottom of one column to the top of the next automatically.
What is the difference between column-count and column-width?
column-count fixes the number of columns whatever the container width. column-width sets an ideal width and lets the browser decide how many fit, which makes the layout respond to space without media queries.
How do I make a heading span all columns?
Set column-span: all on the heading. It then breaks out of the column flow and runs the full width of the container, with the text resuming in columns below it.
How do I stop an element being split across columns?
Apply break-inside: avoid to it. That keeps a figure, card or blockquote whole, moving it to the next column rather than cutting it in half at the boundary.
Should I use CSS columns or grid?
Use columns when a single continuous block of text should flow from one column into the next, as in an article. Use grid when you are placing separate items into a layout, because grid never reflows content between cells.
Related generators
- Typography — Size, spacing, decoration, text-wrap and text-stroke for any text block.
- CSS Grid — Define tracks, gaps, alignment and auto-placement, then make one item span rows and columns.
- Flexbox — Direction, wrapping, alignment and gap, plus per-item grow, align-self and order.
- Container Queries — Style a component by the width of its own container instead of the viewport.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.