Grid — Carousel
Spike · PLAT-3609
Carousel on the new grid
A true 4-up on the 12-column grid is 4 × 3 columns = exactly 12, so the cards fill the width with zero peek. Peek has to come from somewhere. This page compares design's off-grid route (shrink cards to 11/12 so a sliver shows) against an on-grid route (keep cards on column lines; let a full-bleed track reveal the next card in the margin). Both are responsive n-up carousels — the cards resize 1 → 2 → 4 across the breakpoints. The hotpink bars behind each carousel are the shipped .tng-grid.tng-debug overlay — the 12 columns, so you can check what lands on the grid. Drag, trackpad-scroll or use the controls; slides snap to the left. Resize — breakpoints fire at 768 and1024.
Variant A · control
Design's off-grid proposal
4-up snapped to 11 of 12 columns for extra peek. Cards are ~2.75 columns wide, so their edges do not land on the grid — you can see them drift off the hotpink column lines. Container-aligned at rest, full-bleed on both ends, peek on either side once scrolled.
Variant B · on-grid
On-grid, margin-peek
Cards are exactly 3 columns (12 / 4) so every edge lands on a column line — check them against the hotpink bars. The four cards fill the content width; the track is full-bleed on both ends so neighbours peek in the responsive margin on either side. Trade-off vs A: peek = the margin width (20/40/56/80/96px), not a tunable ~1 column.
Figma card dims (annotated per the ticket): Large card > 400px, Small card ≤ 400px, 21:9 media. Here the width is a consequence of the count.