column-count

Definition

The CSS property column-count defines the number of columns in a multi-column layout. It determines how many columns of content will be created and split the content into those columns.

Examples

This will create 3 columns of equal width:

column-count: 3;

This will create 2 columns, where each column will have a width of 200px:

column-count: 2; column-width: 200px;

This will automatically determine the number of columns based on the width of the container and the length of the content:

column-count: auto;

Values

Best Practices

• Consider the layout of the content: The number of columns should be chosen based on the layout of the content and the size of the container.
• Use column-width along with column-count: When defining the number of columns, it's a good practice to also define the width of the columns using the column-width property.
• Test on different screen sizes: Multi-column layouts should be tested on different screen sizes to ensure that the content is easily readable and the layout looks good on different devices.
• Avoid overly complex multi-column layouts: Simple multi-column layouts are generally easier to read and understand than complex layouts with many columns.
• Use CSS media queries: Use CSS media queries to adjust the number of columns based on the screen size.

Browser Compatibility