New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
My photo grid leaves ragged gaps under the shorter images instead of packing them tight like Pinterest does.
What you'll have at the end
A responsive image gallery that packs variable-height photos with no gaps, using native masonry where supported and a clean grid fallback everywhere else
You need
A set of photo files with genuinely different shapes (some tall, some wide, some square) and each photo's real pixel width and height on hand, plus a container element ready to hold them.
Not covered
Choosing image formats or compressing the photo files themselves; loading more photos in after the page opens, which needs scripting this step hasn't covered yet.
Leans on
A grid column blowout caused by one oversized image or line
a single oversized photo is blowing out an existing grid layout, rather than building a whole gallery from scratch
A grid layout whose tab order doesn't match what's on screen
if the visual order this gallery packs photos into needs checking against keyboard tab order in more depth than one clause here covers
Checked 20 Aug 2026
Part of the CSS Grid Layout cookbook