Instagram Masonry

Displays your Instagram posts in a beautiful Pinterest styled

Written By Social Hampster

Last updated About 10 hours ago

Displays your Instagram posts in a variable-height grid where taller images take up more vertical space. Creates a natural, Pinterest-style layout that looks great for photography and mixed-format content.

Plan: Personal and above

How to Insert

From the plugin: After connecting your Instagram account, click Masonry in the plugin panel.

From the dashboard: Click Details on your Instagram feed, then click Copy next to Masonry. Paste in Framer with Cmd+V or Ctrl+V.

Props Reference

Prop	What it does	Notes
Feed ID	Links the component to your Instagram account	Set automatically
Max Posts	How many posts to show	e.g. 9, 12, 15
Columns	Number of columns	Masonry splits posts across this many columns
Gap	Space between cards in pixels
Show Caption	Shows the caption below the card	Toggle
Show Stats	Shows like and comment counts	Toggle
Border Radius	Rounds card corners	Value in pixels
Image Fit	How images fill the card	Cover or Contain
Background Color	Card background color	Shown behind images when using Contain fit
Overlay Color	Color overlay shown on hover

Reels in Masonry

Reels appear automatically in the Masonry layout alongside your photos, in the same order you posted them on Instagram. No extra setting needed. Reels are available on the Personal plan and above.

Common Issues

The layout looks uneven

This is expected behavior. Masonry fills columns from top to bottom, so posts with different heights will create an intentionally varied layout. This is the defining feature of a Masonry grid.

Feed not showing on the published site

Whitelist your domain. In the Social Hampster dashboard, open your feed, click Details, and add your published site URL under Allowed Domains.