The column-width property in CSS is used to specify the desired width of columns in a multi-column layout. The browser automatically determines how many columns can fit within the available space based on the specified width.
- Defines the preferred width for each column.
- Allows the browser to automatically calculate the number of columns needed.
- Creates flexible and responsive multi-column layouts that adapt to the available space.
Syntax:
column-width: auto | length | initial | inherit;
Property Values:
- auto: It is the default value. The browser determines the width of the columns.
- length: It is used to specify the width of the columns in terms of length. The length can be set in the form of px, cm etc.
- initial: It is used to set the column-width property to its default value.
- inherit: It is used to set column-width property from its parent.
Example: Using column-width: auto property.
Example: Using column-width: lengthproperty.
Example: Using column-width: initial property.