Optimizing Web Layouts with Chrome 145 CSS Multi-Column Wrapping

New CSS Multi-Column Layout Features in Chrome

Chrome 145 introduces the column-height and column-wrap CSS properties to modernize multi-column layouts. These properties allow content to wrap into new rows rather than forcing a horizontal scroll when content exceeds container limits.

Why This Matters

Traditionally, CSS Multi-Column layouts were avoided because overflowing content triggered unintuitive horizontal scrolling, which is a significant UX failure on the modern web where vertical scroll is the default. While CSS Grid and Flexbox are robust for item-based layouts, they cannot fragment a single continuous stream of content across multiple columns and rows, leaving a critical gap in layout capabilities for long-form text or newspaper-style designs.

Key Insights

• Chrome 145 (2026) enables column-wrap: wrap to transform traditional multi-column layouts into 2D flows.
• The column-height property allows for explicit container heights, enabling vertical fragmentation of content streams.
• Multi-column remains the only system capable of fragmenting a continuous content stream across containers, unlike Grid or Flexbox.
• Browser support is currently limited to Chrome 145+ as of April 2026, with Firefox, Safari, and Edge lacking implementation.
• Vertical page-flipping can be achieved by combining column-wrap with scroll-snap-type: y mandatory for a fluid pagination experience.

Working Examples

Basic implementation of the new column-wrap property in Chrome 145+ to enable 2D content flow.

.article {
  column-gap: 10px;
  column-count: 3;
  column-wrap: wrap;
  height: 350px;
}

Practical Applications

• Newspaper-style layouts: Utilizing explicit column heights to create responsive, multi-row information flows. Pitfall: Under-estimating content height leads to unbalanced columns or awkward gaps.
• Block-direction carousels: Setting column height to 100dvh for a fluid, vertical page-flipping pagination system. Pitfall: Imbalanced slide content can interrupt the visual flow.
• Fixed-height card grids: Managing cards with predictable heights to create seamless flows across rows. Pitfall: Unbalanced layouts occur if content-per-card is significantly uneven.

References:

• https://css-tricks.com/css-multi-column-layout-wrapping-features/