How to create a simple responsive gallery using ONLY CSS?

Creating a responsive gallery with CSS is one of those classic exercises that, when well-planned, serves many real-world projects. In my case, I have often needed to display images in an orderly, adaptable way without depending on JavaScript or heavy frameworks. And the good news is that HTML and CSS are more than enough.

In this article, I am going to show you how to build a responsive image gallery step by step, explaining not only the "what" but also the "why" behind each decision; the gallery is composed of images and a brief description of them:

What is a responsive gallery and why create it only with CSS?

A responsive gallery is a collection of images that automatically adapts to the screen size, reorganizing rows and columns according to the device.

Opting for a gallery made only with HTML and CSS has several clear advantages:

• Less dependencies
• Better performance
• Easier to maintain code
• Ideal for small or medium projects

In more than one project, I have found that adding JavaScript adds nothing when the goal is simply to show well-distributed images.

HTML structure of a responsive image gallery

First, we define the basic structure that the gallery will have; in other words, the HTML:

<div id="container">
  <div>
    <img src="img/arya-stark.jpg" alt="Arya Stark">
    <span>Arya Stark</span>
  </div>
  ***
  <div>
    <img src="img/jon-snow.jpg" alt="Jon Snow">
    <span>Jon Snow</span>
  </div>
  <div>
    <img src="img/daenerys.jpg" alt="Daenerys Targaryen">
    <span>Daenerys Targaryen</span>
  </div>
</div>

Explaining the previous HTML code:

• The div with the id #container is nothing more than the container where the gallery will be housed—in other words, the images and brief descriptions.
• Each child div represents an element of the gallery. In my experience, keeping this minimal structure makes it much easier to scale the gallery later, adding or removing images without touching anything else.

CSS styles for a responsive gallery

Now it's the turn for the gallery's presentation, in other words, the CSS. Let's look at some key aspects:

• We use the sibling selector provided in CSS to select the span elements at the same level and adjacent to the images:

  #container div img + span{
  .
  .
  .
    opacity:0;
  }
          

  Indicating that the description will remain hidden (opacity:0) until the cursor is positioned over the image (:hover) and the description (span) is shown:

  #container div img:hover + span{
    opacity:1;
  }     

  The opacity property is used to hide and show the image description instead of other properties like display or visibility because, with the opacity property, a progressive effect is achieved to show descriptions and to straighten the images. As you can see, all effects use so-called CSS Transitions.

• By default, three images are shown per row; however, they can be easily adapted to show more or fewer images per row with the help of media queries:

  @media (min-width:1600px){
      #container div{
          width: 15%;
      }
  }
  }

Resulting in:

#container {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
}
#container div {
 width: 33.33%;
 position: relative;
}
#container img {
 width: 100%;
 height: auto;
 display: block;
}

Show descriptions with hover using CSS

One of the most interesting points of this gallery is the hover effect to show the description.

#container div img + span {
 position: absolute;
 bottom: 0;
 background: rgba(0,0,0,0.7);
 color: #fff;
 width: 100%;
 padding: 10px;
 opacity: 0;
 transition: opacity 0.3s ease;
}
#container div img:hover + span {
 opacity: 1;
}

Use of the img + span selector

This selector allows selecting the span adjacent to the image, without the need for extra classes. It is a clean and very effective solution.

Why use opacity and not display:none

After trying several options, using opacity gave me the best result. Unlike display or visibility, it allows for animating the transition, achieving a smooth and professional effect.

@media (max-width: 900px) {
  #container div {
    width: 50%;
  }
}
@media (max-width: 600px) {
  #container div {
    width: 100%;
  }
}

You can view and download the full code for the gallery at the following links:

Best practices for a responsive image gallery

Over time, I have been applying these recommendations almost by default:

• Use relative units (%, vw, fr)
• Optimize images (WebP if possible)
• Apply loading="lazy" to improve performance
• Avoid images with disproportionate sizes
• Always test on mobile and desktop

<img src="imagen.webp" alt="Image" loading="lazy">

Final result of the responsive gallery with CSS

The result is a lightweight, adaptable, and easy-to-maintain gallery, without external dependencies and ready to use in any web project.

This approach has worked for me in both personal projects and production sites where simplicity was key.

Frequently asked questions about responsive galleries with CSS

• Can a responsive gallery be created without JavaScript?
  • Yes. For most cases, HTML and CSS are more than enough.
• How many images per row are recommended?
  • Three on desktop is usually a good starting point, adjusting with media queries.
• Flexbox or Grid?
  • Flexbox for simplicity. Grid if you need more advanced control.
• Does this approach work on mobiles?
  • Yes, as long as you use media queries and fluid sizes.

Conclusion

Creating a responsive gallery with CSS is not complicated if you start from a clear structure and make good decisions from the beginning. In my experience, betting on pure CSS not only simplifies development but also improves the performance and maintainability of the project.

The next step, learn how to create an image gallery, but this time using JavaScript