¿Cómo hacer una simple galería responsive con SOLO CSS?

Crear una galería responsive con CSS es uno de esos ejercicios clásicos que, bien planteados, sirven para muchísimos proyectos reales. En mi caso, muchas veces he necesitado mostrar imágenes de forma ordenada, adaptable y sin depender de JavaScript ni frameworks pesados. Y la buena noticia es que con HTML y CSS es más que suficiente.

En este artículo te voy a mostrar cómo construir una galería de imágenes responsive paso a paso, explicando no solo el qué, sino también el por qué de cada decisión; la galería está compuesta de imágenes y una breve descripción sobre las mismas:

¿Qué es una galería responsive y por qué crearla solo con CSS?

Una galería responsive es una colección de imágenes que se adapta automáticamente al tamaño de la pantalla, reorganizando filas y columnas según el dispositivo.

Optar por una galería hecha solo con HTML y CSS tiene varias ventajas claras:

• Menos dependencias
• Mejor rendimiento
• Código más fácil de mantener
• Ideal para proyectos pequeños o medianos

En más de un proyecto he comprobado que añadir JavaScript no aporta nada cuando el objetivo es simplemente mostrar imágenes bien distribuidas.

Estructura HTML de una galería de imágenes responsive

Primero definimos la estructura básica que tendrá la galería; en otras palabras, el 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>

Explicando el código HTML anterior:

• El div con identificador #container no es más que el contenedor en la cual va a estar alojada la galería en otras palabras, las imágenes y las breves descripciones.
• Cada div hijo representa un elemento de la galería. En mi experiencia, mantener esta estructura mínima hace que luego sea mucho más fácil escalar la galería, añadir o quitar imágenes sin tocar nada más.

Estilos CSS para una galería responsive

Ahora es el turno de la presentación para la galería, en otras palabras el CSS, veamos algunos aspectos claves:

• Empleamos el selector hermano provisto en CSS para seleccionar los span al mismo nivel y adyacentes a las imágenes:

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

  Indicando que la descripción permanecerá oculta (opacity:0) hasta que se posicione el cursor encima de la imagen (:hover) y se muestre la descripción (span):

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

  Se emplea la propiedad opacity para ocultar y mostrar la descripción de la imagen en vez de otras propiedades como display o visibility porque con la propiedad opacity se logra un efecto progresivamente para mostrar las descripciones y para enderezar las imágenes. Como podrás darte cuenta, todos los efectos emplean las llamadas Transiciones en CSS.

• Por defecto, se muestran tres imágenes por filas; pero, se se pueden adaptar fácilmente para mostrar más o menos imágenes por filas con la ayuda de los media query:

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

Quedando como:

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

Mostrar descripciones con hover usando CSS

Uno de los puntos más interesantes de esta galería es el efecto hover para mostrar la descripción.

#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;
}

Uso del selector img + span

Este selector permite seleccionar el span adyacente a la imagen, sin necesidad de clases extra. Es una solución limpia y muy eficaz.

Por qué usar opacity y no display:none

Después de probar varias opciones, usar opacity me dio el mejor resultado. A diferencia de display o visibility, permite animar la transición, logrando un efecto suave y profesional.

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

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

Puedes visualizar y descargar el código completo de la galería en los siguientes enlaces:

Buenas prácticas para una galería de imágenes responsive

Con el tiempo he ido aplicando estas recomendaciones casi por defecto:

• Usar unidades relativas (%, vw, fr)
• Optimizar imágenes (WebP si es posible)
• Aplicar loading="lazy" para mejorar el rendimiento
• Evitar imágenes con tamaños desproporcionados
• Probar siempre en móvil y escritorio

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

Resultado final de la galería responsive con CSS

El resultado es una galería ligera, adaptable y fácil de mantener, sin dependencias externas y lista para usar en cualquier proyecto web.

Este enfoque me ha funcionado tanto en proyectos personales como en sitios en producción donde la simplicidad era clave.

Preguntas frecuentes sobre galerías responsive con CSS

• ¿Se puede crear una galería responsive sin JavaScript?
  • Sí. Para la mayoría de los casos, HTML y CSS son más que suficientes.
• ¿Cuántas imágenes por fila son recomendables?
  • Tres en escritorio suele ser un buen punto de partida, ajustando con media queries.
• ¿Flexbox o Grid?
  • Flexbox para simplicidad. Grid si necesitas un control más avanzado.
• ¿Funciona este enfoque en móviles?
  • Sí, siempre que uses media queries y tamaños fluidos.

Conclusión

Crear una galería responsive con CSS no es complicado si se parte de una estructura clara y se toman buenas decisiones desde el principio. En mi experiencia, apostar por CSS puro no solo simplifica el desarrollo, sino que también mejora el rendimiento y la mantenibilidad del proyecto.

El siguiente paso, aprende a crear una galería de imágenes pero, esta vez usando JavaScript