Responsive photo grid

[Jordanpuga]

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

Read-only: https://preview.webflow.com/preview/newbookalliance?preview=698658a631d7503c1e23e0f8485ec822

Website url: newbookalliance.webflow.io

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

Instagram: Dropbox - File Deleted

Newbook: https://www.dropbox.com/s/vkhrz60781evts0/Screen%20Shot%202017-10-26%20at%2012.07.17%20PM.png?dl=0

---

Here is my site Read-Only: https://preview.webflow.com/preview/newbookalliance?preview=698658a631d7503c1e23e0f8485ec822
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

Why not use webflow columns?

Columns | Webflow University

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)

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

Container | Webflow University

[Jordanpuga]

My dude, your response has been very helpful!

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

cheers

[Siton_Systems (Ezra Siton)]

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