22 CSS Image Galleries
02 / 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 Aspect-Ratio Justified Gallery

The Google-Images / Flickr look: fluid rows where every photo keeps its native aspect ratio (no cropping) yet each row stretches flush to both edges. Achieved with flex-grow weighting and aspect-ratio — no JS measuring.

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-05" aria-label="Justified aspect-ratio gallery">
  <div class="gl-05__gallery">
    <div class="gl-05__row">
      <figure class="gl-05__item" style="--r:1.5"><img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=600&h=400&auto=format&fit=crop" alt="Wide sandy beach" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:0.75"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=450&h=600&auto=format&fit=crop" alt="Coastal lighthouse" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.33"><img src="https://images.unsplash.com/photo-1475721027785-f74eccf877e2?q=80&w=600&h=450&auto=format&fit=crop" alt="Wooden pier over water" loading="lazy" decoding="async"></figure>
    </div>
    <div class="gl-05__row">
      <figure class="gl-05__item" style="--r:1.78"><img src="https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?q=80&w=640&h=360&auto=format&fit=crop" alt="Green valley panorama" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1"><img src="https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?q=80&w=500&h=500&auto=format&fit=crop" alt="Close-up of a wildflower" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.4"><img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?q=80&w=560&h=400&auto=format&fit=crop" alt="River through a forest" loading="lazy" decoding="async"></figure>
    </div>
    <div class="gl-05__row">
      <figure class="gl-05__item" style="--r:0.8"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=480&h=600&auto=format&fit=crop" alt="Tall narrow waterfall" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.6"><img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=640&h=400&auto=format&fit=crop" alt="Sunlit sand dunes" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.2"><img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?q=80&w=540&h=450&auto=format&fit=crop" alt="Alpine meadow in bloom" loading="lazy" decoding="async"></figure>
    </div>
  </div>
</section>
.gl-05,
.gl-05 *,
.gl-05 *::before,
.gl-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-05 ::selection {
  background: oklch(0.6 0.15 160);
  color: #fff;
}

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

.gl-05__gallery {
  width: min(920px,100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gl-05__row {
  display: flex;
  gap: 8px;
}

.gl-05__item {
  flex: var(--r) 1 0;
  aspect-ratio: var(--r);
  border-radius: 8px;
  overflow: hidden;
  background: #e6e8ea;
}

.gl-05__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .4s;
}

.gl-05__item:hover img {
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .gl-05__row {
    flex-wrap: wrap;
  }

  .gl-05__item {
    flex: 1 1 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-05__item img {
    transition: none;
  }
}
/* No JavaScript — flex-grow weighted by aspect-ratio justifies each row with no cropping. */
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 Aspect-Ratio Justified Gallery
Source: https://codefronts.com/snippets/css-image-gallery/css-aspect-ratio-justified-gallery/

The Google-Images / Flickr look: fluid rows where every photo keeps its native aspect ratio (no cropping) yet each row stretches flush to both edges. Achieved with flex-grow weighting and aspect-ratio — no JS measuring.
## HTML
```html
<section class="gl-05" aria-label="Justified aspect-ratio gallery">
  <div class="gl-05__gallery">
    <div class="gl-05__row">
      <figure class="gl-05__item" style="--r:1.5"><img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?q=80&w=600&h=400&auto=format&fit=crop" alt="Wide sandy beach" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:0.75"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=450&h=600&auto=format&fit=crop" alt="Coastal lighthouse" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.33"><img src="https://images.unsplash.com/photo-1475721027785-f74eccf877e2?q=80&w=600&h=450&auto=format&fit=crop" alt="Wooden pier over water" loading="lazy" decoding="async"></figure>
    </div>
    <div class="gl-05__row">
      <figure class="gl-05__item" style="--r:1.78"><img src="https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?q=80&w=640&h=360&auto=format&fit=crop" alt="Green valley panorama" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1"><img src="https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?q=80&w=500&h=500&auto=format&fit=crop" alt="Close-up of a wildflower" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.4"><img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?q=80&w=560&h=400&auto=format&fit=crop" alt="River through a forest" loading="lazy" decoding="async"></figure>
    </div>
    <div class="gl-05__row">
      <figure class="gl-05__item" style="--r:0.8"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=480&h=600&auto=format&fit=crop" alt="Tall narrow waterfall" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.6"><img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=640&h=400&auto=format&fit=crop" alt="Sunlit sand dunes" loading="lazy" decoding="async"></figure>
      <figure class="gl-05__item" style="--r:1.2"><img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?q=80&w=540&h=450&auto=format&fit=crop" alt="Alpine meadow in bloom" loading="lazy" decoding="async"></figure>
    </div>
  </div>
</section>
```
## CSS
```css
.gl-05,
.gl-05 *,
.gl-05 *::before,
.gl-05 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gl-05 ::selection {
  background: oklch(0.6 0.15 160);
  color: #fff;
}

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

.gl-05__gallery {
  width: min(920px,100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gl-05__row {
  display: flex;
  gap: 8px;
}

.gl-05__item {
  flex: var(--r) 1 0;
  aspect-ratio: var(--r);
  border-radius: 8px;
  overflow: hidden;
  background: #e6e8ea;
}

.gl-05__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .4s;
}

.gl-05__item:hover img {
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .gl-05__row {
    flex-wrap: wrap;
  }

  .gl-05__item {
    flex: 1 1 40%;
  }
}

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

## JavaScript
```js
/* No JavaScript — flex-grow weighted by aspect-ratio justifies each row with no cropping. */
```

How this works

Each row is a flflex container. Every item is given flex: var(--r) 1 0 where --r is the image's aspect ratio, so free space is distributed in proportion to width, and the item's own aspect-ratio: var(--r) then sets a matching height. Because all items in a row share the same computed height, the row justifies edge-to-edge with zero cropping — the pure-CSS equivalent of a JS justified-gallery pass.

Images use object-fit: cover only as a safety net; with correct --r values they're shown uncropped at their true proportions.

Make it yours

  • Add photos by dropping in an item with its true --r (width ÷ height).
  • Control row height indirectly by how many items you place per row.
  • Change the gap for tighter or airier justification.
  • For an unknown/mixed feed, generate the --r values server-side from image dimensions.

Gotchas — read before shipping

  • The --r value must match the real image ratio or the photo will letterbox or crop — feed accurate ratios.
  • Pure-CSS justification needs you to group items into rows; a single wrapping flex row can't auto-balance the last line like a JS library.
  • Keep flex-basis: 0 so growth is purely ratio-weighted; a non-zero basis skews the justification.

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 88+.

aspect-ratio on flex items: Chrome 88+, Safari 15+, Firefox 89+. Older engines fall back to intrinsic image sizes.

Techniques used in this demo

decoding="async"MDN ↗loading="lazy"MDN ↗aspect-ratioMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →