CSS Portal

CSS column-width Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

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

<h1>CSS column-width</h1>
<p class="intro">The <code>column-width</code> property sets an ideal column width; the browser will create as many columns as fit in the available space.</p>
<div class="columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod, nibh a hendrerit dictum, urna arcu fermentum urna, sit amet volutpat elit velit at sapien. Integer sit amet pulvinar lacus.</p>
<p>Nullam non augue vitae mauris gravida tincidunt. Curabitur a nunc nec lectus gravida tristique. Vivamus suscipit, justo at vehicula cursus, lorem nibh facilisis urna, non commodo lorem arcu eget justo.</p>
<p>Praesent mattis, nunc et vestibulum dapibus, arcu eros tincidunt sapien, vitae pharetra nisl risus id nisl. Sed vitae magna vitae lacus convallis scelerisque eget non lectus.</p>
<p>Fusce in sapien sed urna tempor gravida. Nunc vitae purus a velit tincidunt feugiat. Donec euismod, lorem sit amet dictum efficitur, erat sapien gravida arcu, ac tincidunt arcu dolor non sapien.</p>
</div>
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    padding: 24px;
    color: #222;
}

h1 {
    margin: 0 0 12px 0;
    font-size: 20px;
}

.intro {
    margin: 0 0 16px 0;
    max-width: 60ch;
    color: #444;
}

.columns {
    -webkit-column-width: 200px;
    column-width: 200px;
    -webkit-column-gap: 24px;
    column-gap: 24px;
    -webkit-column-rule: 1px solid #e6e6e6;
    column-rule: 1px solid #e6e6e6;
    padding: 12px;
    background: #fafafa;
}

.columns p {
    margin: 0 0 12px 0;
}

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
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!