🎯 CSS columns Property

The columns CSS property is a shorthand property used to create multi-column layouts. It allows you to define both the preferred column width and the maximum number of columns in a single declaration.

Instead of writing column-width and column-count separately, you can use the columns property to simplify your CSS code and create responsive newspaper-style layouts.

The following example creates columns with a preferred width of 200px and a maximum of 3 columns.

article {
columns: 200px 3;
}           

The browser automatically determines the most suitable column arrangement based on the available space.

columns: column-width column-count; 
            

The order of values does not matter. Both examples below are valid:

columns: 200px 3;

columns: 3 200px; 
            

Allows the browser to calculate both the column width and column count automatically.

div {
columns: auto;
}           

Specifies only the preferred width of each column.

div {
columns: 250px;
}           

Specifies only the maximum number of columns.

div {
columns: 3;
}           

Resets the property to its default value and removes the multi-column layout.

div {
columns: initial;
}           

Inherits the columns value from the parent element.

div {
columns: inherit;
}           

.article-content {
columns: 250px 3;
column-gap: 30px;
}           

This creates a responsive multi-column layout where each column aims to be 250px wide, with a maximum of three columns and a 30px gap between them.