Crea una Galería de Imágenes en CSS con Flexbox (Diseño Responsive)

Recuerdo que cuando empecé con esto del diseño web, a muchos usuarios nos dio por empezar a crear galerías de imágenes en HTML y CSS. Supongo que es algo fácil de hacer y muy recurrente, de hecho puedes poner en cualquier sitio web que siempre quedaba bien.

Hacer una galería de imágenes es realmente fácil, el problema o la parte más difícil reside en hacer un diseño responsive, que se adapte a todas las pantallas.

Pues bien, tenemos varias opciones en CSS, pero hoy veremos la forma más fácil de hacer un diseño adaptable con un par de líneas de código CSS con flexbox.

Si no sabes que es flexbox te dejo aquí un enlace con la documentación sobre flexbox.

Crear la galería de imágenes con Flexbox

Bueno, vamos al lío, vamos a crear nuestra galería de imágenes «extra-fácil». Si te da un poco de pereza leer no te preocupes, te dejo aquí el vídeo donde lo explico.

Lo primero que haremos será crear la estructura de la galería en HTML. Vamos a hacerlo, de forma muy fácil. Primero haremos un envoltorio, con la clase «galeria». Luego colocaremos las imágenes con sus respectivas rútas.

En el vídeo explico como hacerlo con atajos de teclado para ir más rápido.

Quedaría algo así:

<div class="galeria">
    <img src="/img/img1.jpg" alt="">
    <img src="/img/img2.jpg" alt="">
    <img src="/img/img3.jpg" alt="">
    <img src="/img/img4.jpg" alt="">
    <img src="/img/img5.jpg" alt="">
    <img src="/img/img6.jpg" alt="">
    <img src="/img/img7.jpg" alt="">
    <img src="/img/img8.jpg" alt="">
    <img src="/img/img9.jpg" alt="">
  </div>

Después de crear la galería en HTML, pasaremos a crear los estilos CSS.

En esta ocasión, solo vamos a usar la dos elementos: la clase «galeria» y las imágenes.

Pondremos un display: flex en el envoltorio clase=»galeria» y luego, para que sea completamente adaptable el diseño, utilizaremos la propiedad flex-flow: wrap. Esta propiedad (propia de flexbox) hace que el número de columnas de nuestra galería sea variable, en función del tamaño de la pantalla.

Quedaría de la siguiente forma:

.galeria{
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

.galeria img{
  max-width: 400px;
  padding: 1rem;
}

Como ves no hay que complicarse mucho la vida, simple y fácil.

Digamos que toda la magia de este diseño adaptable reside en la propiedad flex-flow: wrap, que convierte nuestro diseño en responsive.

¡Ojo! La propiedad flex-flow: wrap; no funciona si no has puesto antes un display:flex;

Ya tendríamos hecha nuestra galería de imágenes con flexbox completamente adaptable.