---
title: "SpanGrid — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Filip Banasiak · Sections. SpanGrid turns CMS items, components, or images into a flexible 12-column bento grid."
canonical: "https://framer.elliotli.dev/component/spangrid"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/SpanGrid

# SpanGrid

Asymmetric bento grid

[View on Framer](https://framer.com/marketplace/components/spangrid/?via=elliot-li)

![SpanGrid preview image 1](https://framer.elliotli.dev/og/component/spangrid/00e5ecd93887849a/1600x1200.jpg)

## Summary

SpanGrid turns CMS items, components, or images into a flexible 12-column bento grid.

## Description

## Build expressive, asymmetric grids in Framer—without manually rebuilding every layout for every breakpoint.

**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.**

## Rank history [How rankings work →](/terms#rankings)

-   All · #3188

## Details

- **Author**: Filip Banasiak
- **Price**: $9.00
- **Published**: 2026-04-27
- **Updated**: 2026-08-04
- **Added**: 2026-04-25
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove