Portfolio grids · Project case studies · Image galleries · Bento feature sections · Press / logo walls · Editorial layouts · Anywhere a uniform grid feels too rigid.
Works with CMS. Drop a CMS collection into the Items slot and SpanGrid handles the rest — your layout stays dynamic as content changes.
12-column span control. Set the column span per item (1–12) from a simple array. Items automatically wrap to the next row, and dense packing backfills gaps so your grid stays tight.
Two modes — Canvas Items or Images. Slot in CMS collections, components, or any Framer layers, or feed it a flat array of responsive images for quick galleries. One component covers both workflows.
Per-breakpoint component variants. Pair SpanGrid with the included variantFromGrid override and your slotted components automatically swap variants at the mobile breakpoint — no duplicate sections, no separate mobile pages. You can also override variants per item.
Container-aware scaling. Optional scaling mode keeps row heights proportional to the component's actual rendered width — so the grid looks right whether it's full-bleed or sitting in a constrained column.
Full styling controls. Row height, X/Y gap, padding, corner radius, and a configurable mobile breakpoint — all exposed as native Framer property controls.
Refund Policy:
Due to the digital nature of this product, all sales are final and non-refundable. Refunds are only provided if there is a documented technical issue where the component does not work as intended or as described.
Refunds will not be issued if the component works correctly but does not meet your expectations or does not work the way you would prefer.
Filip Banasiak
