CSS Columns Shorthand Property Explained

The CSS columns property is a shorthand that sets both column-width and column-count in a single declaration. By combining these two properties, columns provides a powerful, responsive mechanism for multi-column text layouts, allowing the browser to dynamically adjust the number and width of columns according to the available container space without requiring media queries.

Syntax and Values

The shorthand accepts either one or both values in any order:

/* One value */
columns: 15rem; /* column-width */
columns: 3;     /* column-count */

/* Both values */
columns: 15rem 3;
columns: 3 15rem;

When one value is omitted, it automatically defaults to auto.

How the Values Interact

When you supply both a width and a count, they do not act as rigid constraints. Instead, they function together as boundaries:

  1. column-width acts as a minimum: It defines the ideal, minimum width a column should have before the browser decides to drop a column.
  2. column-count acts as a maximum: It establishes an upper limit on how many columns can be generated, regardless of how wide the container gets.

The Browser Calculation Process

When rendering an element with columns: 200px 3;, the browser evaluates the available width of the container:

  • Container wider than 600px (plus gaps): The browser will display a maximum of 3 columns. Rather than creating a fourth column, it stretches the existing 3 columns evenly to fill the remaining space, making each column wider than 200px.
  • Container between 400px and 600px: There is not enough room for 3 columns of at least 200px. The browser reduces the layout to 2 columns and distributes the width evenly between them.
  • Container narrower than 400px: The browser drops down to a single column filling the full width of the container.

Summary of Behaviors

  • Width only (columns: 200px): The browser creates as many 200px columns as will fit, with no upper limit on column count.
  • Count only (columns: 3): The container is always divided into 3 equal columns, regardless of how narrow or wide each individual column becomes.
  • Both (columns: 200px 3): The layout scales responsively between 1 and 3 columns, ensuring no column shrinks below 200px while preventing the layout from exceeding 3 columns on ultra-wide screens.