1. css
  2. /properties
  3. /column-count

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

ValueDescription
numberSpecifies the number of columns to be created.
autoAutomatically determines the number of columns based on the width of the container and the length of the content.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes