1. css
  2. /properties
  3. /columns

columns

Definition

The 'columns' shorthand property in CSS sets both the column-width and column-count properties in a single declaration. The columns property is used to create a multi-column layout, dividing a container's content into two or more columns.

Examples

Set the number of columns to 3 and the column width to 200px:

#example1 {
 columns: 200px 3;
 column-gap: 10px;
}

Set the number of columns to auto and the column width to 300px:

#example2 {
  columns: 300px auto;
  column-gap: 10px;
}

Set the number of columns to auto and the column width to auto:

#example3 {
  columns: auto auto;
  column-gap: 10px;
}

Values

ValueDescription
<column-width> <column-count>Specifies the width of the columns and the number of columns in the layout.

Best Practices

  • Always set the column-gap property to add space between columns.
  • Avoid using fixed widths for columns, as they may not be suitable for different screen sizes.
  • Consider using auto instead of fixed widths, as this allows the columns to adapt to different screen sizes.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes