This page demonstrates how the masonry layout handles Cumulative Layout Shift (CLS). The CSS container queries ensure the correct number of columns render immediately, even before JavaScript measures the container width.
On the server, masonryWidth is 0. Instead of defaulting to 1
column, we calculate the maximum columns that could fit a 1920px viewport.
Dynamic @container rules immediately hide 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 correct column count. Since CSS was already showing the right number, there's no shift.