CSS3 Multiple Columns

CSS Multi-column Layout

Creating Newspaper-like Columns

The CSS Multi-column Layout module provides properties to arrange content into multiple columns, similar to how text flows in a newspaper. This can be useful for presenting long blocks of text in a more readable format or achieving specific visual layouts.

Example of text flowing across columns:

Imagine this paragraph flowing naturally across several vertical columns, making it easier to scan than one very wide block of text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Browser Support

Multi-column layout properties are now widely supported across all modern web browsers without the need for vendor prefixes (like -webkit- or -moz-). While prefixes were required in older browser versions, you can generally use the standard properties today.

Key Multi-column Properties

Let’s explore the main properties used to create and style multi-column layouts:

• column-count
• column-width
• columns (shorthand for column-width and column-count)
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule (shorthand for rule properties)
• column-span

Defining the Number of Columns (column-count)

The column-count property explicitly specifies the number of columns an element’s content should be divided into.

Example: Divide the text within a <div> element into 3 columns:

.multi-col-container {
  column-count: 3;
}

Defining the Column Width (column-width)

The column-width property suggests an optimal width for the columns. The browser will create as many columns of at least this width as can fit within the container’s available space.

Example: Suggest an optimal column width of 200 pixels:

.multi-col-container {
  column-width: 200px;
}

Note: You can use both column-count and column-width. The browser will satisfy both constraints, potentially resulting in fewer columns than column-count if the container isn’t wide enough, or columns wider than column-width if needed to fill the count.

The columns Shorthand Property

The columns property is a shorthand that allows you to set column-width and column-count in one declaration.

.multi-col-container {
  /* Try to make columns 15em wide, but create at most 3 columns */
  columns: 15em 3;
}

.another-container {
  /* Equivalent to column-count: 4 */
  columns: 4;
}

.yet-another-container {
  /* Equivalent to column-width: 250px */
  columns: 250px;
}

Specifying the Gap Between Columns (column-gap)

The column-gap property sets the size of the space between columns.

Example: Specify a 40-pixel gap between columns:

.multi-col-container {
  column-count: 3;
  column-gap: 40px;
}

Note: The gap property (from the Box Alignment module) can also be used as a shorthand for row-gap and column-gap in multi-column layouts, similar to its use in Grid and Flexbox.

Adding a Rule Between Columns (column-rule)

You can draw a line (rule) between columns using the column-rule-* properties or the column-rule shorthand.

• column-rule-width: Specifies the width of the rule (e.g., 1px).

• column-rule-style: Specifies the style of the rule (e.g., solid, dotted, dashed).

• column-rule-color: Specifies the color of the rule (e.g., lightblue).

Example using the shorthand column-rule (sets width, style, and color):

.multi-col-container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid lightgrey;
}

Note: The column rule is drawn in the middle of the gap between columns and does not take up space itself.

Spanning Elements Across Columns (column-span)

The column-span property allows specific child elements (like headings or images) to span across all the columns instead of flowing within a single column.

Example: Make <h2> elements span across all columns within a multi-column container:

.multi-col-container h2 {
  column-span: all;
  /* Add some margin for spacing */
  margin-top: 1em;
  margin-bottom: 0.5em;
}

Currently, the only valid value other than the default (none) is all.

Multi-column Properties Summary

Property	Description
column-count	Specifies the desired number of columns.
column-fill	Controls how content is balanced between columns (e.g., balance, auto). Support varies.
column-gap	Specifies the gap size between columns.
column-rule	Shorthand for setting column-rule-width, column-rule-style, and column-rule-color.
column-rule-color	Sets the color of the rule between columns.
column-rule-style	Sets the style (e.g., solid, dotted) of the rule.
column-rule-width	Sets the width of the rule.
column-span	Specifies if an element should span across all columns (all) or not (none).
column-width	Specifies the suggested optimal width for columns.
columns	Shorthand for setting column-width and column-count.

Use multi-column layout thoughtfully, as excessively narrow columns or long articles split across many columns can sometimes hinder readability.