- Twenty tiles, each a static size: height in pixels, width in whole columns via
- masonryColSpan. No body is rendered up front — every one sits behind
- @defer (on viewport) and loads as its placeholder scrolls into view. Because
- the tile already owns its height, the swap costs no relayout: the grid positioned the board
- from the skeletons, and the real content lands in exactly the same box.
-
+ Twenty tiles, each a static size: height in pixels, width in whole columns via
+ masonryColSpan. No body is rendered up front — every one sits behind
+ @defer (on viewport) and loads as its placeholder scrolls into view.
+ Because the tile already owns its height, the swap costs no relayout: the grid positioned
+ the board from the skeletons, and the real content lands in exactly the same box.
+
- Tiles are wider than article cards, so this board also redefines what the breakpoint names
- mean — breakpoints: { sm: 620, md: 980, … } — while
- columns still reads as { xs: 1, sm: 2, md: 3, … }. The
- override merges over the defaults and is scoped to this grid.
-
+ Tiles are wider than article cards, so this board also redefines what the breakpoint names
+ mean — breakpoints: { sm: 620, md: 980, … } — while
+ columns still reads as { xs: 1, sm: 2, md: 3, … }. The
+ override merges over the defaults and is scoped to this grid.
+
{{ w.title }}
+ @defer (on viewport) { +
- Every button below mutates the source array and nothing else. Item order is derived from the
- DOM at layout time, so a prepend really lands first — the ordering bug that makes other
- masonry wrappers expose a manual reloadItems() cannot occur here.
-
+ Every button below mutates the source array and nothing else. Item order is derived from the
+ DOM at layout time, so a prepend really lands first — the ordering bug that makes other
+ masonry wrappers expose a manual reloadItems() cannot occur here.
+
-
- {{ card.title }}
-{{ card.body }}
-
+
+ {{ card.title }}
+{{ card.body }}
+
- Column count follows the container width through a breakpoint map —
- { xs: 1, sm: 2, md: 3, xl: 4, '2xl': 5 }, named against the default
- scale, and matched against this panel rather than the viewport. Cards with images are held
- back until decode() resolves, so they never land at the wrong height and shove
- their neighbours around.
-
+ Column count follows the container width through a breakpoint map —
+ { xs: 1, sm: 2, md: 3, xl: 4, '2xl': 5 }, named against the default
+ scale, and matched against this panel rather than the viewport. Cards with images are held
+ back until decode() resolves, so they never land at the wrong height and shove
+ their neighbours around.
+
-
-
- columns -
- {{ stat.columns }} -
- column width -
- {{ stat.columnWidth | number: '1.0-0' }}px -
- items -
- {{ stat.itemCount }} -
- pass -
- {{ stat.durationMs | number: '1.2-2' }}ms -
-
-
-
-
-
-
-
-
-
- {{ card.title }}
-{{ card.body }}
--
+
- columns +
- {{ stat.columns }} +
- column width +
- {{ stat.columnWidth | number: '1.0-0' }}px +
- items +
- {{ stat.itemCount }} +
- pass +
- {{ stat.durationMs | number: '1.2-2' }}ms +
+
+
+
+
+
+
+
+
+
+ {{ card.title }}
+{{ card.body }}
+
+
+ {{ card.title }}
+{{ card.body }}
+
- Solve time is measured across the whole pass — reading measurements, running the solver and
- writing every transform. Sizes arrive pre-computed from one shared
- ResizeObserver, so a pass performs no forced reflow, and repeated passes with
- identical input return before touching the DOM. Turn on contentVisibility to let
- the browser skip rendering off-screen tiles.
-
+ Solve time is measured across the whole pass — reading measurements, running the solver and
+ writing every transform. Sizes arrive pre-computed from one shared
+ ResizeObserver, so a pass performs no forced reflow, and repeated passes with
+ identical input return before touching the DOM. Turn on contentVisibility to
+ let the browser skip rendering off-screen tiles.
+
-
-
- columns -
- {{ stat.columns }} -
- items -
- {{ stat.itemCount }} -
- height -
- {{ stat.height | number: '1.0-0' }}px -
- last pass -
- {{ stat.durationMs | number: '1.2-2' }}ms -
- passes -
- {{ stat.pass }} -
-
-
-
-
-
-
-
-
-
-
- {{ tile.id }}
-
- }
- -
+
- columns +
- {{ stat.columns }} +
- items +
- {{ stat.itemCount }} +
- height +
- {{ stat.height | number: '1.0-0' }}px +
- last pass +
- {{ stat.durationMs | number: '1.2-2' }}ms +
- passes +
- {{ stat.pass }} +
+
+
+
+
+
+
+
+
+
+
+ {{ tile.id }}
+
+ }
+
- masonryColSpan widens an item across whole columns; the solver drops it into the
- group of columns with the lowest shared top edge. A masonryGridStamp element is
- positioned by you and treated as an obstacle. horizontalOrder switches from
- shortest-column packing to strict row order.
-
+ masonryColSpan widens an item across whole columns; the solver drops it into
+ the group of columns with the lowest shared top edge. A
+ masonryGridStamp element is positioned by you and treated as an obstacle.
+ horizontalOrder switches from shortest-column packing to strict row order.
+
-
- {{ card.title }}
- @if (spanOf(card) > 1) { - spans {{ spanOf(card) }} columns - } -
+
+