Streaming live at 10am (PST)

Responsive photo grid


Hi there, I’m trying to replicate the instagram photo grid on browser. When I shrink the browser on, the container & the photos scale down. I’m trying to recreate this effect on a website I’m building on Webflow. If you guys got some time to check out my site here is the read-only


Website url:

here are some screenshots of the grid I’m talking about.



Here is my site Read-Only:
(how to share your site Read-Only link)


Why not use webflow columns?

Or flexbox

Your grid is very broken (You use BG images? why?) - use img tag (responsive: width: 100%; height: auto). On instegram all images are square (so crop your images by photoshop or online) if you want the same look.

Also - width: 20vw; - this is not the best unit for responsive grid (use %)

Also you could chrome-inspect instegram site and see the styles.

On mobile - 3 cols with very small right margin (3px). On desktop the same layout with extra margin (28px)

use max-width % (on tablet/desktop) and 100% (on mobile + small padding). NOT width!! (max-width) or use build in container:


My dude, your response has been very helpful!

the site is much more responsive, thank you for taking the time to provide links & insight.



You welcome! :slight_smile: Mark as solve to close this topic (and for future searches about this topic). Thanks!!

closed #5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.