Framer Update, Layout & Design

Framer Update: Masonry Grids

Benjamin

2:34

13K views

Nov 27, 2025

About this lesson

Introducing Masonry Grids in Framer. Turn any Grid into a packed masonry grid with a single click. The Masonry toggle is available under the Grid properties, and enabling it lets you craft masonry layouts. These types of layouts use fixed columns but flexible row heights, so items stack tightly, creating a brick-like pattern driven by each layer’s content or height. This works especially well with our recently introduced Fit Image feature, letting you design Pinterest-like layouts directly in Framer. You can also design new masonry grids from scratch, by selecting Masonry from the Layout Menu in the Toolbar. Masonry Grids play nice with our CMS, where using Effects like Stagger and Lightbox unlock all kinds of new animations and interactions. https://framer.com/updates/masonry

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Yo, my name is Benjamin and this is 0:03masonry in framer. Here we have a normal 0:07grid of images sourced from the CMS.0:12As you can see, the images are set to 0:15fit image, but the grid cells do not 0:18adapt. As for these kinds of grids, the 0:22height of each cell has to be equal. And 0:26this is why we're introducing masonry. a 0:29grid layout where items are arranged 0:32like bricks in a wall. Each item keeps 0:35its own height and the columns fill 0:38vertically based on available space 0:40rather than aligning to uniform rows,0:44creating a packed and naturally 0:46staggered look. And this release makes 0:48our unique fit image sizing option even 0:53more useful. Plus, we've ensured that 0:55masonry plays nice with recently 0:58introduced effects like stagger and 1:00light box, also unlocking new 1:03interactions. You can also find masonry 1:06grids in our layout menu to create one 1:09from scratch. Masonry also works well in 1:13non CMSbased setups where it's just 1:16images in a grid. And this even allows 1:20you to sort your images freely on the 1:23canvas, giving you unparalleled control 1:26over your layout. You can even define a 1:30unique sorting for each breakpoint,1:33which is useful in cases you want to 1:35feature specific projects on top, even 1:38when the amounts of columns change. And 1:42finally, you can also introduce masonry 1:44as just a layout option for a specific 1:47type of device or breakpoint. For 1:50example, I believe it allows many more 1:52unique layout options on the phone 1:55breakpoint where you would otherwise 1:57typically fall back to a single vertical 2:00stack. In fact, this is a great example 2:03of a type of layout and interaction 2:06previously impossible to achieve in 2:09framer. All of this is made possible by 2:12releases shipped in the last few months 2:14from Fit Image to the Ticker Effect all 2:17the way to Masonry today. And that's it 2:20for this video. Thank you for watching 2:23and stay tuned for more updates coming 2:27soon.

TeachesGrids

Also coversBreakpoints Sizing Stacks Stagger

Watch on YouTube ↗

‹ Welcome to Design Pages in Framer

Make a Custom 404 Page in Framer ›