CSS columns Property

CSS columns Property

The columns property in CSS is a shorthand for setting both the column-width and column-count properties in a multi-column layout. It allows text to flow into multiple columns automatically, similar to how newspapers format content.

1. Syntax

selector {
  columns: column-width column-count;
}

Value	Description
<column-width>	Specifies the ideal width for each column (e.g., 200px).
<column-count>	Specifies the exact number of columns (e.g., 3).

✅ You can set one or both values.

2. Example – Defining Columns with columns

.columns {
  columns: 250px 3;
}

<div class="columns">
  <p>This text is automatically divided into three columns.</p>
  <p>Each column will have a minimum width of 250px.</p>
</div>

✅ Three columns with a minimum width of 250px each.

3. Example – Using columns with Only Width

.columns {
  columns: 200px;
}

✅ The browser automatically determines the number of columns based on available space.

4. Example – Responsive Columns

.columns {
  columns: 300px 4;
}

@media (max-width: 768px) {
  .columns {
    columns: 200px 2;
  }
}

✅ On large screens → 4 columns of 300px each.
✅ On smaller screens → 2 columns of 200px each.

5. Best Practices

✔ Use columns for newspaper-style layouts.
✔ Combine with column-gap for better readability.
✔ Use column-rule for clear separation between columns.
✔ Apply media queries to adjust columns on different screen sizes.