I finally figured out how to make a responsive masonry grid without any JavaScript

I was building a photo gallery for a friend's bakery site and the images kept looking weird on different screen sizes. After messing with flexbox for an hour, I switched to CSS Grid and used grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). The real trick was adding grid-auto-rows: 1px and letting the images set their own row spans with grid-row-end: span 8. It worked perfectly on the first try. Has anyone else used this method for a masonry layout?

3 comments

3 Comments

benw8729d ago

My buddy's art blog crashed trying that same grid trick.

adam_wood9729d ago

Guess his art was too powerful for the grid!

skylershah1d ago

I had the same grid crash last month, @adam_wood97. Switching to a single column layout for the images finally fixed it for me. Maybe that trick could help your buddy too.