Multi-column layout

column

These properties define a layout scheme that uses two or more columns.

columns
column-count
column-width
column-fill
column-gap
column-rule
column-rule-style
column-rule-color
column-rule-width
column-span

columns

Multi-column layout

This property sets either the column-count or the column-width or both.

css, style, column, columns

column-count

How many columns

This property defines how many columns to use when the column-width is not defined.

css, style, column, column-count

column-width

Ideal column width

This property sets the ideal column width for multi-column layouts, and therefore determines how many columns will be present.

css, style, column, column-width

column-fill

Balanced columns

This property can be specified in order to create columns with equal amounts of text.

css, style, column, column-fill

column-gap

Gutters

This property specifies the width of the gutters between columns in grids, flexboxes, and multi-column layouts.

css, style, column, column-gap

column-rule

All-in-one spec

This property sets all of these properties, for the vertical line between columns, in a single declaration: column-rule-style, column-rule-color, and column-rule-width.

css, style, column, column-rule

column-rule-color

column line color

This property sets the color of the line between columns.

css, style, column, column-rule-color

column-rule-style

column line appearance

This property sets the appearance of the line between columns.

css, style, column, column-rule-style

column-rule-width

column line width

This property sets the width of the line between columns.

css, style, column, column-rule-width

column-span

Headings that cross columns

This property allows headings to span across multiple columns.

css, style, column, column-span