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:
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:
|number||Specifies the number of columns to be created.|
|auto||Automatically determines the number of columns based on the width of the container and the length of the content.|
- 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.
|Chrome||Firefox||Safari||Internet Explorer||Microsoft Edge||Opera|