SpanGrid turns CMS items, components, or images into a flexible 12-column bento grid. Choose how many columns each item should span, and the component automatically wraps content onto new rows and fills available gaps to keep the composition compact.
What you can do:
• Create portfolio grids, project case studies, image galleries, feature sections, logo walls, and editorial layouts
• Set an individual column span from 1–12 for every item
• Use Canvas Items for CMS content and Framer components, or switch to Images for quick responsive galleries
• Keep layouts dynamic as CMS content changes
• Automatically switch component variants at your chosen mobile breakpoint with the included variantFromGrid override
• Set variants individually when a specific item needs different behavior
• Enable container-aware scaling to preserve row proportions inside full-width sections or narrower columns
• Adjust row height, horizontal and vertical gaps, padding, corner radius, and mobile breakpoint with native Framer controls
One component, two workflows, and far more visual freedom than a uniform grid.
SpanGrid turns CMS items, components, or images into a flexible 12-column bento grid. Choose how many columns each item should span, and the component automatically wraps content onto new rows and fills available gaps to keep the composition compact.
What you can do:
• Create portfolio grids, project case studies, image galleries, feature sections, logo walls, and editorial layouts
• Set an individual column span from 1–12 for every item
• Use Canvas Items for CMS content and Framer components, or switch to Images for quick responsive galleries
• Keep layouts dynamic as CMS content changes
• Automatically switch component variants at your chosen mobile breakpoint with the included variantFromGrid override
• Set variants individually when a specific item needs different behavior
• Enable container-aware scaling to preserve row proportions inside full-width sections or narrower columns
• Adjust row height, horizontal and vertical gaps, padding, corner radius, and mobile breakpoint with native Framer controls
One component, two workflows, and far more visual freedom than a uniform grid.
