column-width

Definition

The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.

Examples

Set the minimum width of columns to 300px:

#example1 {
  column-width: 300px;
  column-gap: 10px;
}

Set the minimum width of columns to auto:

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

Set the minimum width of columns to a percentage:

#example3 {
  column-width: 25%;
  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