22 CSS Image Galleries
07 / 22

All 22 in 22 CSS Image Galleries

  1. 01CSS Hexagon Honeycomb Gallery
  2. 02CSS Aspect-Ratio Justified Gallery
  3. 03CSS Flexbox Expanding Panel Gallery
  4. 04CSS :has() Hover Spotlight Gallery
  5. 05CSS Radial Orbit Image Gallery
  6. 06CSS Interactive Pointer Trail Gallery
  7. 07CSS Masonry Image Gallery
  8. 08CSS Metro Tile Grid Gallery
  9. 09CSS Magazine Layout Gallery
  10. 10CSS Lightbox Gallery Overlay
  11. 11CSS Filmstrip Carousel Gallery
  12. 12CSS Accordion Image Gallery
  13. 13CSS Mosaic Zoom Gallery
  14. 14CSS Glassmorphism Hover Cards
  15. 15CSS Diagonal Slice Reveal Gallery
  16. 16CSS Tilt Parallax Image Cards
  17. 17CSS 3D Cube Image Viewer
  18. 18CSS Perspective Depth Stack Gallery
  19. 19CSS Infinite Scroll Image Strip
  20. 20CSS Ken Burns Slideshow Gallery
  21. 21CSS Polaroid Stack Gallery
  22. 22CSS Scattered Photos Gallery
Pure CSSMIT licensed

CSS Masonry Image Gallery

The Pinterest classic: staggered vertical columns where images of different heights pack tightly together with no awkward gaps, and no JavaScript layout library. The single most-searched gallery pattern in Tier-1 markets.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="gl-01" aria-label="Masonry photo gallery">
  <div class="gl-01__grid">
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?q=80&w=500&h=700&auto=format&fit=crop" alt="Snow-capped mountain ridge at dawn" loading="lazy" decoding="async" width="500" height="700"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=500&h=400&auto=format&fit=crop" alt="Misty pine forest canopy" loading="lazy" decoding="async" width="500" height="400"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?q=80&w=500&h=560&auto=format&fit=crop" alt="Still alpine lake reflecting the sky" loading="lazy" decoding="async" width="500" height="560"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=500&h=620&auto=format&fit=crop" alt="Rolling desert sand dunes" loading="lazy" decoding="async" width="500" height="620"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=500&h=380&auto=format&fit=crop" alt="Turquoise ocean waves from above" loading="lazy" decoding="async" width="500" height="380"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=500&h=680&auto=format&fit=crop" alt="Tall waterfall in a green gorge" loading="lazy" decoding="async" width="500" height="680"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?q=80&w=500&h=460&auto=format&fit=crop" alt="City skyline at blue hour" loading="lazy" decoding="async" width="500" height="460"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=500&h=540&auto=format&fit=crop" alt="Autumn trees in gold and red" loading="lazy" decoding="async" width="500" height="540"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?q=80&w=500&h=420&auto=format&fit=crop" alt="Layered red canyon walls" loading="lazy" decoding="async" width="500" height="420"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=500&h=600&auto=format&fit=crop" alt="Green aurora over a snowy valley" loading="lazy" decoding="async" width="500" height="600"></figure>
  </div>
</section>
.gl-01,
.gl-01 *,
.gl-01 *::before,
.gl-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-01 ::selection {
  background: oklch(0.6 0.16 250);
  color: #fff;
}

.gl-01 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  background: #f4f5f7;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.gl-01__grid {
  width: min(920px,100%);
  columns: 4;
  column-gap: 14px;
}

.gl-01__item {
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #e7eaef;
  box-shadow: 0 8px 22px -16px rgba(16,24,40,.6);
  transition: box-shadow .3s;
}

.gl-01__item:hover {
  box-shadow: 0 16px 34px -18px rgba(16,24,40,.55);
}

.gl-01__item img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.gl-01__item:hover img,
.gl-01__item:focus-within img {
  transform: scale(1.06);
}

.gl-01__item a:focus-visible {
  outline: 3px solid oklch(0.6 0.16 250);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .gl-01__grid {
    columns: 3;
  }
}

@media (max-width: 560px) {
  .gl-01__grid {
    columns: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-01__item,
    .gl-01__item img {
    transition: none;
  }
}
/* No JavaScript — CSS multi-column + break-inside:avoid produce the masonry packing. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Image Gallerie from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Masonry Image Gallery
Source: https://codefronts.com/snippets/css-image-gallery/css-masonry-image-gallery/

The Pinterest classic: staggered vertical columns where images of different heights pack tightly together with no awkward gaps, and no JavaScript layout library. The single most-searched gallery pattern in Tier-1 markets.
## HTML
```html
<section class="gl-01" aria-label="Masonry photo gallery">
  <div class="gl-01__grid">
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1584917865442-de89df76afd3?q=80&w=500&h=700&auto=format&fit=crop" alt="Snow-capped mountain ridge at dawn" loading="lazy" decoding="async" width="500" height="700"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=500&h=400&auto=format&fit=crop" alt="Misty pine forest canopy" loading="lazy" decoding="async" width="500" height="400"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?q=80&w=500&h=560&auto=format&fit=crop" alt="Still alpine lake reflecting the sky" loading="lazy" decoding="async" width="500" height="560"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=500&h=620&auto=format&fit=crop" alt="Rolling desert sand dunes" loading="lazy" decoding="async" width="500" height="620"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=500&h=380&auto=format&fit=crop" alt="Turquoise ocean waves from above" loading="lazy" decoding="async" width="500" height="380"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=500&h=680&auto=format&fit=crop" alt="Tall waterfall in a green gorge" loading="lazy" decoding="async" width="500" height="680"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?q=80&w=500&h=460&auto=format&fit=crop" alt="City skyline at blue hour" loading="lazy" decoding="async" width="500" height="460"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=500&h=540&auto=format&fit=crop" alt="Autumn trees in gold and red" loading="lazy" decoding="async" width="500" height="540"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?q=80&w=500&h=420&auto=format&fit=crop" alt="Layered red canyon walls" loading="lazy" decoding="async" width="500" height="420"></figure>
    <figure class="gl-01__item"><img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=500&h=600&auto=format&fit=crop" alt="Green aurora over a snowy valley" loading="lazy" decoding="async" width="500" height="600"></figure>
  </div>
</section>
```
## CSS
```css
.gl-01,
.gl-01 *,
.gl-01 *::before,
.gl-01 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-01 ::selection {
  background: oklch(0.6 0.16 250);
  color: #fff;
}

.gl-01 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  padding: 40px 20px;
  background: #f4f5f7;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.gl-01__grid {
  width: min(920px,100%);
  columns: 4;
  column-gap: 14px;
}

.gl-01__item {
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #e7eaef;
  box-shadow: 0 8px 22px -16px rgba(16,24,40,.6);
  transition: box-shadow .3s;
}

.gl-01__item:hover {
  box-shadow: 0 16px 34px -18px rgba(16,24,40,.55);
}

.gl-01__item img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}

.gl-01__item:hover img,
.gl-01__item:focus-within img {
  transform: scale(1.06);
}

.gl-01__item a:focus-visible {
  outline: 3px solid oklch(0.6 0.16 250);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .gl-01__grid {
    columns: 3;
  }
}

@media (max-width: 560px) {
  .gl-01__grid {
    columns: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-01__item,
    .gl-01__item img {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — CSS multi-column + break-inside:avoid produce the masonry packing. */
```

How this works

The gallery is laid out with CSS multi-column (columns: 4 + column-gap). Each figure is told break-inside: avoid so an image is never split across a column break, and images keep their natural heights, which is what produces the classic staggered masonry rhythm.

Because columns flow top-to-bottom then left-to-right, reading order is preserved for screen readers, and every tile is a semantic <figure> with an <img alt>. A subtle contained hover-zoom (clipped by overflow:hidden) adds life without any reflow.

Where you want row-first reading order instead, progressive-enhance to native grid-template-rows: masonry in supporting engines — the columns version is the universally-supported baseline shown here.

Make it yours

  • Change the column count by editing columns (or set column-width for auto-responsive columns).
  • Tune density with column-gap and the figure's margin-bottom.
  • Swap the hover-zoom depth via the image transform: scale() value.
  • Progressive-enhance to grid-template-rows: masonry behind an @supports query for row-order masonry.

Gotchas — read before shipping

  • Multi-column fills column-by-column, so visual order runs down each column, not left-to-right across a row — fine for photos, worth knowing for ordered content.
  • Always set break-inside: avoid on the items or an image can tear across the column boundary.
  • Give each <img> width/height or an aspect-ratio so the column heights are known before images load (no CLS).

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome 50+.

CSS multi-column is supported everywhere. Native grid masonry is still experimental (Firefox flag / early Safari) so this baseline uses columns.

Techniques used in this demo

:focus-withinMDN ↗decoding="async"MDN ↗loading="lazy"MDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →