CSS columns Property

The CSS columns property is used to control both the number of columns and the width of those columns in a layout. It’s a shorthand property that allows you to set multiple values at once, such as the number of columns and their width.

This makes it easier to create multi-column layouts without manually defining each column’s style.

columns: 3;

Syntax

columns: column-width columns-count | auto | initial | inherit;

Property Values

Here are the Property Values for the CSS columns Property:

CSS columns Property Examples

Here are the Examples of the columns Property:

Example 1: CSS columns Property with Automatic Column Distribution

In this example, the columns property is used to split the content into multiple columns, where the number of columns and their width are automatically determined by the browser. The content inside the div with the class GFG will be laid out in as many columns as the browser can fit, based on the available space and content.

Output:

👁 Image

Note: If any of the values among the column-width and column-count are not specified, then the browser assumes their value as auto by default.

integer: This is used to specify the column-width and the column-count using integer values. 

Example 2:  CSS columns Property for Multi-Column Layout

In this example, we use the CSS columns property to create a multi-column layout. The text content inside the div with the class GFG is split into five columns, each with a minimum width of 60px. The columns property works across browsers, with specific vendor prefixes for better compatibility.

Output:

👁 Image

Supported Browser

The browsers supported by columns Property are listed below:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari

Note: Ensure to test on older browser versions for compatibility, as some may require vendor prefixes (-webkit, -moz) for full functionality.