CSS columns Property

Description

The columns shorthand property controls multi-column flow within a block-level element, allowing content to be laid out across multiple vertical columns rather than a single continuous block. It is functionally a convenience for setting the two main underlying controls - column-width and column-count - in one declaration, and it determines how and when inline content is fragmented into separate column boxes. Conceptually, using this shorthand tells the browser how to split the element’s content into a series of column boxes and whether to prioritize a specific count of columns or a target width for each column.

When a block is split into columns, the user-agent creates independent column regions that manage fragmenting text, inline content, and inline-level boxes. The way content is balanced or filled across those columns is affected by column balancing behavior - which is controlled separately by column-fill - and by the available height of the containing block. Elements that establish their own fragmentation rules (for example, elements with explicit break controls) interact with the column flow, which can result in content being forced to the next column or preserved together. Note that floats and positioned elements inside the multi-column container are constrained by the column box they occur in, so their layout and stacking may feel different compared with a single-column context.

The visual separation and spacing between the generated column boxes are independent concerns that sit alongside the shorthand: the gap between columns is managed by column-gap, while any visible separators (rules) are handled by column-rule. Authors can also influence whether individual elements are allowed to be split across columns using break control properties such as break-inside, which is important for preserving the integrity of things like images, figures, or grouped content. In practice, the columns shorthand simplifies declaring multi-column intentions, while the related properties let you tune the fragmentation behavior, spacing, and visual presentation to match the desired reading experience.

Definition

Initial value: See individual properties
Applies to: Block level elements
Inherited: No
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.columns

Interactive Demo

columns: 2;

columns: 4;

columns: 8rem auto;

columns: 18ch;

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

columns: <column-width> || <column-count>

Values

<column-width>See column-width CSS property for values.
<column-count>See column-count CSS property for values.

Example

HTML

<div class="wrap">

  <h1>CSS Columns Example</h1>

  <div class="multi-column">

    <p class="intro">This example demonstrates how block content flows across multiple columns using the CSS columns property. Resize the viewport to see responsive changes.</p>



    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>



    <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>



    <p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>



    <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam.</p>



    <p>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>



    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>



    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

  </div>

</div>

CSS

/* Layout & base styles */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 2rem;
  color: #333;
  line-height: 1.6;
  background: #fafafa;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  color: #222;
}

/* Multi-column container */
.multi-column {
  /* columns:   */
  columns: 3 220px;
  column-gap: 1.5rem;
  column-rule: 1px solid #e6e6e6;
  padding: 1rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Make the intro span all columns */
.multi-column .intro {
  column-span: all;
  font-weight: 600;
  margin-bottom: 1rem;
}

.multi-column p {
  margin: 0 0 1rem 0;
  text-align: justify;
}

/* Responsive adjustments */
@media (max-width: 800px) {
  .multi-column {
    columns: 2 180px;
  }
}

@media (max-width: 480px) {
  .multi-column {
    columns: 1;
    column-rule: none;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS columns property. Hover over a browser icon to see the version that first introduced support for this CSS property.