Column-Width Property
Last updated: 2026-09-13
column-width Column-Width Property
The column-width property specifies the ideal width of each column in a multi-column layout. The browser derives the actual column count from the container's width and this value, with content flowing into the columns adaptively; it is a good fit for flexible multi-column typesetting.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
column-width: auto | <length>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Computed automatically. |
<length> | Type | A fixed column width. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-width | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： column-width is an ideal value; the actual width may adjust slightly, and the column count grows or shrinks as the container width changes.
Warning： When column-width and column-count are both set, column-count acts as the maximum; the actual count is the smaller of the two computed results.
❓ FAQ
QWhat's the difference between column-width and width?
Awidth sets the element's own width, its outer box size. column-width sets the ideal width of each column inside a multi-column layout; the browser computes the column count from the container width and this value, so the count changes as the container resizes. column-width is flexible, suiting content of unknown length that should auto-column, while width is fixed. The two address completely different dimensions of the same box.
QWhat happens when column-width and column-count are both set?
ASet together, column-count acts as the upper limit and column-width as the ideal width; the browser finds the best solution under both constraints, which is the number of columns that fit at that width, but never more than column-count. For example, column-width:150px; column-count:4 in a 500px container fits only 3 columns, so 3 is rendered. This combination gives you both a minimum comfortable width and a maximum column count.
QWhat does column-width:auto mean?
Aauto means the column width is not decided by this property; it is left to column-count or the browser. It is the default value. When only column-width is set and column-count is not, the browser divides the container into columns of roughly that width; when both are set, the auto column width is irrelevant and column-count governs. Use column-width:auto explicitly only when you want to cancel an earlier width.
QHow do I build responsive multi-column layouts with column-width?
ASet only column-width and skip column-count, for example column-width:250px, and the browser decides the number of columns from the container width: 4 to 5 columns on wide screens, dropping to 1 or 2 on narrow ones, with no media queries needed. That is the advantage of column-width over column-count, and it works well for reading-oriented content, since the columns always stay close to the ideal width.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
columns (Multi-column Shorthand)
The shorthand for column-count and column-width.
column-count
Set the number of columns.
