How can we help?

With masonry layouts, you can create beautiful image galleries and unique designs. If you haven't heard of masonry grids before, it's the type of layout websites like Pinterest use to show items with different heights in multiple columns.

Building masonry layouts hasn't been possible in Framer… until now. But now it's easier than ever before, and I'll show you how you can add it to your site in 1 minute with Superfields.

First, get the Superfields component from the Superfields dashboard if you don't already have it in your project, then connect it to a CMS collection list outside the page breakpoint.

Next, add a Layout to the Superfields component and set type to Masonry. This brings up some controls for changing the number of columns, width of items, and gap between items.

One limitation of CMS collection lists in Framer is that all images have the same aspect ratio, even if the original images from the CMS have different sizes. To help you create amazing galleries of images with different aspect ratios, you can use the Aspect Ratio Image component from the Superfields dashboard. This component displays an image in it's original aspect ratio.

Just connect an image field from the CMS and watch as the images on each CMS item dynamically resize to fit their original size.

That's everything you need to know about adding masonry layouts to your website in Framer. I hope this inspires you to create an amazing website today!