v145 · CSS · Height-Constrained Columns

Height-Constrained Columns

Use column-height to set a maximum height for each column. When content fills a column to that height, it flows into the next column. Combined with column-wrap: wrap, this creates a true 2D grid of columns — like a magazine or newspaper — without any JavaScript measurement or CSS Grid hacks.

Chrome 145 required for column-height. In older browsers the property is ignored and content flows in standard unbounded columns.

magazine-style layout

200px 3

how this differs from CSS Grid

CSS Grid creates a fixed cell structure — items are placed into predetermined rows and columns, and you must know the content height in advance. Multicol with column-height flows content linearly: items fill a column top-to-bottom, automatically moving to the next column when they hit the cap. New content added to the container flows naturally without restructuring the grid.

Aspect CSS Grid Multicol + column-height
Item placement Row × column cell Linear flow across columns
Column height Fixed rows or fr units Max-height cap per column
New items Next cell in flow Continue flowing in last column or wrap
Break control grid-column-span break-inside: avoid, break-before: column

code

/* Magazine / newspaper style 2D columns */
.magazine {
  /* 3 columns max per row */
  columns: 3;
  column-gap: 1.25rem;
  column-rule: 1px solid #ccc;

  /* New in Chrome 145: */
  column-height: 300px;  /* each column tops out at 300px */
  column-wrap: wrap;     /* overflow onto a new row of columns */
}

/* Prevent individual cards from splitting across columns */
.card {
  break-inside: avoid;
}

/* Force a card to start a new column */
.featured-card {
  break-before: column;
}

see also