All projects · UI Components & Interactions
Portfolio — Masonry Gallery
A responsive Pinterest-style masonry image gallery that flows portfolio thumbnails of varying heights into balanced columns with no vertical gaps.
A responsive Pinterest-style masonry image gallery that flows portfolio thumbnails of varying heights into balanced columns with no vertical gaps. Built entirely with CSS column-count, it needs zero JavaScript and reflows from four columns down to one as the viewport narrows.
- Pure-CSS masonry via column-count with break-inside: avoid — no JS or layout library
- Fully responsive: 4→3→2→1 columns across breakpoints
- Elegant editorial styling with serif display heading, gold accent rule, and hover lift
- Single :root theme block makes gap, radius, and colors trivially tunable
Built with: HTML, CSS, CSS multi-column layout (column-count), Google Fonts (Cormorant Garamond, Jost), picsum.photos placeholder images, responsive media queries