CSS Multiple Column Layouts

The CSS multi-column layout provides a straightforward way to create multiple columns of text, similar to the layout used in newspapers.

CSS Multi-columns Properties

• column-count - Specifies the number of columns an element should be divided into
• column-fill - Specifies how to fill columns
• column-gap - Specifies the gap between the columns
• column-rule - A shorthand property for setting all the column-rule-* properties
• column-rule-color - Specifies the color of the rule between columns
• column-rule-style - Specifies the style of the rule between columns
• column-rule-width - Specifies the width of the rule between columns
• column-span - Specifies how many columns an element should span across
• column-width - Specifies a suggested, optimal width for the columns
• columns - A shorthand property for setting column-width and column-count

CSS column-count  Property

The column-count property defines how many columns an element should be split into.

div {
 column-count: 3;
}

CSS column-fill Property

The column-fill property specifies how to fill columns, balance or auto.

div {
 column-count: 3;
 column-fill: balance;
}

CSS column-gap Property

The column-gap property sets the space between columns.

For instance, the following CSS creates a 60-pixel gap between the columns:

div {
  column-count: 3;
  column-gap: 60px;
}

CSS column rules

The column-rule-style property defines the appearance of the line drawn between columns.

div {
  column-rule-style: solid;
}

The column-rule-width property sets the thickness of the line between columns. 

div {
  column-rule-width: 2px;
}

The column-rule-color property specifies the color of the rule between columns:

div {
  column-rule-color: lightgreen;
}

The column-rule property is a shorthand property for setting all the column-rule-* properties.

The following example sets the width, style, and color of the rule between columns:

div {
  column-rule: 2px solid lightgreen;
}

CSS column-span Property

The column-span property determines how many columns an element should span.

For example, the following CSS makes the <h2> element span across all columns:

h2 {
  column-span: all;
}

CSS Column Width

The column-width property sets a recommended width for the columns.

For example, the following CSS suggests an optimal column width of 100 pixels:

div {
  column-width: 90px;
}

CSS columns Property

The columns property is a shorthand that combines:

• column-width
• column-count

div {
  column-width: 90px;
  column-count: 3;
}