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

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