Native CSS Masonry (specified in CSS Grid Layout Module Level 3) allows elements to flow into columns or rows based on available height, creating an asymmetric "waterfall" grid without JavaScript. Traditional JS libraries (like Masonry.js or Isotope) calculate absolute transforms on window resize, causing layout shifts (CLS), expensive DOM reflows, and breaking accessibility tab order. Native CSS Masonry is computed directly within the browser's layout engine during the layout phase with 60fps responsiveness and zero scripting overhead.

The CSS Working Group deliberated between two primary syntaxes: integrating masonry directly into CSS Grid via "grid-template-rows: masonry" (championed by WebKit/Mozilla/Firefox), vs creating a dedicated "display: masonry" display type (championed by Google Chrome). Integrating with Grid allows reusing grid-column, subgrid, gap, and alignment properties, whereas a dedicated display type provides distinct default behaviors without overloading the two-dimensional 2D grid paradigm.

Under "masonry-auto-flow: pack", the browser places each new item into the track that currently has the shortest accumulated height, regardless of source order, ensuring minimal whitespace at the bottom. Under "masonry-auto-flow: next", items are placed strictly in the next sequential track (1, 2, 3...) before wrapping, maintaining left-to-right reading order at the expense of potentially uneven column heights.

Yes. Just like standard CSS Grid, items can specify "grid-column: span 2" or "grid-column: 1 / 3". When spanning multiple tracks in masonry, the item is placed starting from the lowest point across those adjacent tracks, and its height is added to all covered tracks, preserving continuous visual balance without overlap.