Hi there, I’m trying to replicate the instagram photo grid on browser. When I shrink the browser on instagram.com, 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
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: