columns
Splits an element’s content into columns like a newspaper. A shorthand for column-width and column-count.
- Initial value
auto auto- Inherited
- No
- Animatable
- yes, width as a length, count as an integer
- Applies to
- block containers other than tables
- JavaScript
element.style.columns = "12rem 3"
Example
#.topics {
columns: 8rem 3;
column-gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.topics li {
break-inside: avoid;
padding-block: 4px;
}<p style="margin: 0 0 8px; font-weight: 600;">Topics in the CSS docs</p>
<ul class="topics">
<li>Selectors</li>
<li>Pseudo-classes</li>
<li>Box model</li>
<li>Flexbox</li>
<li>Grid</li>
<li>Typography</li>
<li>Colors and backgrounds</li>
<li>Effects</li>
<li>Transitions</li>
<li>Animations</li>
<li>At-rules</li>
<li>Functions</li>
</ul>Definition and usage
#The columns property turns a plain block into a multi-column container. Content flows like in a newspaper: it fills the first column, moves on to the next, and the browser balances their height on its own. You don’t need to touch the HTML or split the text into parts.
It’s a shorthand for two properties. column-width gives the ideal column width: the browser creates as many columns as will fit, and widens them to fill the space. column-count gives the number of columns. When you set both, the count acts as an upper limit, so columns: 12rem 3 means at most three columns, each at least 12rem wide. Width alone gives you a responsive layout with no media queries.
The gap between columns is set by column-gap (the default normal is 1em here), and the line between them by column-rule. Get a full-width heading with column-span: all, and break-inside: avoid on an element stops it from being split between columns, which is handy for cards, quotes, and list items.
Keep the reading order in mind: elements run from top to bottom, column by column, not row by row. For a grid of cards where left-to-right order matters, Grid is the better choice. Also avoid long text in columns taller than the screen, since the reader has to scroll down and then back up.
Syntax
#columns: <column width> || <number of columns>;
column-width: auto | <length>;
column-count: auto | <integer>;Values
#- No columns, the notes flow one under another. This is the default value, meaning
auto auto. number of columns
Exactly two columns of equal width. Notice that a longer note can split across columns.column width
As many columns as will fit, each at least 80px wide. Drag the frame’s bottom-right corner to the left, and the columns will shrink in number.width and limit
Columns are at least 80px, but there will never be more than two. Where the previous version fit three, this one stops at two wider ones.no splitting
Two columns, but each note stays in one piece. If it doesn’t fit, the browser moves the whole thing to the next column.
Values in practice
#auto
auto auto..demo { columns: auto; }2
.demo { columns: 2; }80px
.demo { columns: 80px; }80px 2
.demo { columns: 80px 2; }break-inside: avoid
.demo { columns: 2; }
.note { break-inside: avoid; }More examples
#.gallery {
columns: 120px;
column-gap: 10px;
}
.gallery > * {
break-inside: avoid;
margin-bottom: 10px;
}<style>
.tile { display: grid; align-items: end; padding: 8px 10px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 13px; }
</style>
<div class="gallery">
<div class="tile" style="height: 90px; background: linear-gradient(160deg, #7c3aed, #4c1d95);">1</div>
<div class="tile" style="height: 140px; background: linear-gradient(160deg, #0ea5e9, #075985);">2</div>
<div class="tile" style="height: 70px; background: linear-gradient(160deg, #10b981, #065f46);">3</div>
<div class="tile" style="height: 120px; background: linear-gradient(160deg, #f59e0b, #92400e);">4</div>
<div class="tile" style="height: 80px; background: linear-gradient(160deg, #f43f5e, #9f1239);">5</div>
<div class="tile" style="height: 110px; background: linear-gradient(160deg, #a78bfa, #5b21b6);">6</div>
</div>Tiles of different heights stack with no gaps, since each one lands below the previous one in the same column. The numbers show the order: it runs top to bottom, column by column, not row by row.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Instead of a fixed number of columns, give a width, for example
columns: 14rem. On a phone it stays one column, and on a wide screen more appear. - Mark cards, quotes, and list items in columns with
break-inside: avoid, so they don’t split into two pieces. - If elements must run in order across rows, such as search results, use Grid instead. In columns, the order runs top to bottom.
Related entries
#- column-ruleDraws a line between the columns of a multi-column layout. A shorthand for the line’s width, style, and color.
- column-gapSets the spacing between columns in a flex, grid, or multi-column container.
- grid-template-columnsDefines the grid’s columns: their number and widths.
- displayDetermines how an element behaves in the page layout and how it lays out its children.
- gapSets the spacing between items in a flex, grid, or multi-column container.
Spotted a mistake or missing an example? Write to us.