Tag columns

Creating multi-column layouts — like in magazines or news articles — doesn’t have to be complicated. With the columnsshorthand property in CSS, you can define both the number of columns and their width in one elegant line of code.

🧾 What is columns?

The columns property is a shorthand for two other properties:

  • column-width: the desired width of each column
  • column-count: the desired number of columns

You can specify one or both in any order, and the browser will figure out the rest.

🧬 Syntax

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

Value types:

ValueDescription
<length>Width of each column (200px, 15em, etc.)
<integer>Number of columns (2, 3, etc.)
autoLet the browser decide

🎯 Examples

1. Set 3 columns with automatic width

.article {
  columns: 3;
}

This creates 3 equal-width columns, automatically adjusted to fit the container.

2. Set column width to 250px, and let the browser decide how many fit

.news {
  columns: 250px;
}

The browser will create as many 250px-wide columns as possible within the container width.

3. Define both column width and count

.content {
  columns: 200px 3;
}

This sets a preferred width of 200px and a maximum of 3 columns. The browser will balance the two values to create the best layout.

💡 Equivalent Longhand

The shorthand:

columns: 250px 3;

Is the same as:

cssКопироватьРедактироватьcolumn-width: 250px;
column-count: 3;

But much cleaner!

🧠 How It Works

  • columns helps create flexible, flowing layouts without media queries or complex floats.
  • Content flows from left to right across columns.
  • Used on block-level elements, especially for text-heavy content (e.g., <article>, <section>, <div>).

🛠️ Best Practices

  • Pair with column-gap for spacing and column-rule for dividers:
.columns {
  columns: 200px 3;
  column-gap: 30px;
  column-rule: 1px solid #ccc;
}
  • Use columns for text-heavy layouts or when you want responsive behavior without too much code.
  • For more layout control, consider using Flexbox or CSS Grid instead.

✅ Browser Support

The columns property is supported by all major modern browsers:

  • ✅ Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Opera
  • ✅ Internet Explorer 10+

🔚 Conclusion

The CSS columns property is a convenient way to define responsive, multi-column layouts using just one line. It simplifies layout creation and gives your content a clean, readable, and professional look.