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.