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



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.


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;


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