Photo gallery (lightweight)

A quick and easy way to add a photo gallery to your Bear blog. Photos display in a grid and get dimmed on hover.

No JavaScript, no dependencies, works on any plan. Each thumbnail links to its full-size image, which opens in the browser's own image view. Want photos to open in an overlay instead? Try the lightbox photo gallery.

Preview

Photo gallery grid, thumbnails linking out to full-size images

How to use

Wrap your images in a div with the gallery class, and link each image to its own URL so clicking a thumbnail opens the full-size photo.

Markup

<div class="gallery">

[![Photo](image-url.webp)](image-url.webp)
[![Photo](image-url.webp)](image-url.webp)
[![Photo](image-url.webp)](image-url.webp)

</div>

Styles

/* Photo gallery (lightweight) | robertbirming.com */

.gallery {
  margin-block: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: 0.6rem;
}

.gallery > p {
  margin: 0;
  display: contents;
}

.gallery a {
  display: block;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
}

@media (hover: hover) {
  .gallery a:hover img {
    opacity: 0.7;
  }
}

Happy blogging, and happy snapping.

Want more? Check out the full Bear Blog library.