CSS column-width Property
Description
The column-width property controls the ideal width of columns in a multi-column block. It supplies a target size that the browser uses when deciding how many columns to create inside the available container space. Rather than imposing an absolute, inflexible size, it acts as a hint: the user agent will try to produce as many columns of approximately that width as will fit, but will reduce the number of columns or adjust widths when necessary to avoid creating columns too small for the content. When combined with column-count and the shorthand columns, it participates in the layout algorithm that balances a requested number of columns against the requested column width to produce a usable result.
Because column-width is advisory, it interacts with other multi-column properties that control spacing and ornamentation. The space between columns is controlled by column-gap, while any visual dividers are produced by column-rule; those properties are applied after the basic column geometry is determined and thus affect the usable content area per column. The browser will also respect intrinsic constraints of the content - long unbreakable words, images, or elements with minimum intrinsic sizes can force the engine to create fewer, wider columns or to allow overflow - which makes column-width especially useful in responsive layouts where you want content to reflow into more or fewer columns as the container changes.
In practical use, column-width influences where content is fragmented and how content flows between columns. Elements that are meant to span across multiple columns are influenced by column-span, and to prevent unwanted splits inside a particular element you can use rules such as break-inside. Because columnization happens after inline layout and takes into account replaced content and floats, testing with real content is important: the final column count and actual column widths are derived from the interplay between your column hints and the content’s intrinsic sizing rather than from a single deterministic width.
Definition
- Initial value
- auto
- Applies to
- Block level elements
- Inherited
- No
- Computed value
- The absolute length, zero or larger
- Animatable
- No
- JavaScript syntax
- object.style.columnWidth
Interactive Demo
Syntax
column-width: <length> | auto
Values
- <length>A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px), that indicates the optimal width.
- autoIs a keyword indicating that the width of the column should be determined by other CSS properties, like column-count.
Example
Browser Support
The following information will show you the current browser support for the CSS column-width property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
