This page demonstrates how the masonry layout reduces Cumulative Layout Shift (CLS). It
passes a deterministic initialCols value for SSR. When that value matches the
first measured client column count, stable order modes can hydrate with the same masonry column
tree; otherwise CSS container queries still hide excess columns before JavaScript runs.
On the server, masonryWidth is 0. This demo passes initialCols so SSR can render the same number of columns the client will
use after its first width measurement.
Dynamic @container rules immediately hide SSR columns that don't fit
the actual container width. This happens purely in CSS, before any JS runs.
After hydration, JavaScript measures the actual width and calculates the client
column count. Once masonryWidth is greater than 0, the measured calcCols result wins over initialCols; stable order
modes avoid item redistribution when both counts match.