CSS column-width Property

CSS column-width Property

The column-width property in CSS sets the ideal width of columns in a multi-column layout. It helps control how content flows when displayed in multiple columns.

1. Syntax

selector {
  column-width: value;
}

Value	Description
auto (default)	The browser decides the column width.
<length>	Specifies the preferred width of each column (e.g., 200px).

✅ The browser will adjust the number of columns based on available space.

2. Example – Defining Column Width

.multicol {
  column-width: 250px;
  column-gap: 20px;
}

<div class="multicol">
  <p>This is a multi-column layout. The text will automatically flow into multiple columns if there is enough space.</p>
</div>

✅ The text flows into columns of at least 250px wide.

3. Example – Combining column-width and column-count

.multicol {
  column-width: 200px;
  column-count: 3;
}

✅ The browser ensures columns are at least 200px wide, adjusting the count accordingly.

4. Example – Auto Column Width

.auto-columns {
  column-width: auto;
}

✅ The browser dynamically adjusts column width.

5. Best Practices

✔ Use column-width for responsive layouts.
✔ Combine with column-gap for better spacing.
✔ Use column-count to limit the number of columns.