Column Count & Width

When working with multi-column layouts, you have two ways to control the columns: column-count and column-width. Understanding the difference between them helps you choose the right approach for your layout.

Column Count

column-count sets an exact number of columns. The browser divides the available space evenly among them. If you set column-count to 3, you get exactly 3 columns regardless of how wide or narrow the container is.

.three-columns {
  column-count: 3;
}
    

This is straightforward but not responsive. On a narrow screen, three columns might become too thin to read. You would need media queries to reduce the count at smaller breakpoints.

Column Width

column-width sets a minimum width for each column. The browser then creates as many columns as will fit. This is inherently responsive — more columns on wide screens, fewer on narrow ones.

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

If your container is 800px wide and you set column-width to 250px, you get three columns (each about 266px wide with default gaps). Resize to 600px and you get two columns. No media queries needed.

Using Both Together

You can set both column-count and column-width together. In this case, column-count acts as a maximum and column-width acts as a minimum. The browser respects both constraints.

.balanced {
  column-count: 4;
  column-width: 200px;
}
    

This creates up to 4 columns, each at least 200px wide. If the container cannot fit 4 columns at 200px each, it will reduce the count. This gives you both control and flexibility.

Which Should You Use?

For responsive designs, prefer column-width — it adapts automatically. Use column-count when you need a fixed number of columns, like in a newsletter layout where the design requires exactly two columns. For most cases, column-width with a gap is the simplest and most maintainable approach.