CSS columns

The CSS columns property is used to create a multi-column layout for the content within an element. It allows you to divide the content into multiple columns, making it easier to read and navigate through long blocks of text. This property is especially useful for creating newspaper-like or magazine-style layouts on web pages.

The syntax for the columns property is as follows:

selector {
  columns: column-width column-count;
}

• selector: Represents the HTML element or class to which the columns property will be applied.
• column-width: Specifies the preferred width of each column. It can be expressed in pixels (px), a percentage of the parent element’s width (%), or auto, which means the browser will automatically determine the column width based on available space.
• column-count: Specifies the number of columns you want to create. It can be an integer value representing the exact number of columns or the keyword auto, which means the browser will automatically determine the number of columns based on available space.

Example:

.article {
  columns: 300px 2;
}

In this example, the elements with the class .article will be displayed in a two-column layout, with each column having a preferred width of 300px. If the available space is not wide enough to fit two columns with 300px width, the browser will adjust the number of columns to fit the available space.

The columns property can be further enhanced with additional properties such as column-gap, which sets the gap between columns, and column-rule, which adds a vertical rule between columns.

Example with column-gap and column-rule:

.article {
  columns: 300px 2;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

In this example, we add a 20px gap between columns and create a 1px solid border (#ccc) between each column.

The CSS columns property is a powerful tool for creating responsive and visually appealing multi-column layouts. However, it may not be supported in older browsers, so it’s essential to provide a fallback layout for better cross-browser compatibility.