CSS Multiple Columns

CSS Multiple Columns is a layout module that allows content to be displayed in multiple columns. This feature is useful for creating a newspaper or magazine-style layout where text is divided into columns. With CSS Multiple Columns, you can define the number of columns, the width of the columns, the spacing between columns, and more.

The CSS Multiple Columns module is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. In this chapter, we'll go over the syntax and usage of CSS Multiple Columns.

Syntax

The column-count Property

The column-count property specifies the number of columns in the element. The value can be an integer or the value auto, which means that the number of columns will be determined by the width of the element and the column width.

Here's an example:

#my-element {
 column-count: 3;
}

This sets the element with the ID my-element to have three columns.

The column-width Property

The column-width property specifies the width of the columns. The value can be a length value or the value auto, which means that the width will be determined by the column-count and the width of the element.

Here's an example:

#my-element {
 column-width: 200px;
}

This sets the width of the columns in the element with the ID my-element to 200 pixels.

The column-gap Property

The column-gap property specifies the spacing between the columns. The value can be a length value or the value normal, which is a browser-defined value.

Here's an example:

#my-element {
 column-gap: 20px;
}

This sets the spacing between the columns in the element with the ID my-element to 20 pixels.

The column-rule Property

The column-rule property specifies the style, width, and color of a rule between columns. The value can be any valid border-style value, a length value for the width, and a color value.

Here's an example:

#my-element {
 column-rule: 2px solid black;
}

This sets the rule between columns in the element with the ID my-element to have a width of 2 pixels, a solid style, and a color of black.

Breaks between Columns

By default, content will flow from one column to the next, but you can also insert a break between columns. The break-before and break-after properties control where the break should occur.

Here's an example:

#my-element {
 break-before: column;
}

This inserts a break before the element with the ID my-element, so the first column will start after the element.

Combining Properties

You can combine the properties to create a layout that suits your needs. Here's an example:

#my-element {
 column-count: 3;
 column-width: 200px;
 column-gap: 20px;
 column-rule: 2px solid black;
}

This sets the element with the ID my-element to have three columns, each with a width of 200 pixels and a spacing of 20 pixels between them. The rule between columns will be 2 pixels wide and black in color.