En este artículos voy a enseñarte a hacer una galería de imágenes completamente responsive con CSS Grid y de manera sencilla. Es decir, no nos vamos a complicar mucho la vida para que quede bien.
Las galerías de imágenes son recurrentes en cualquier página web responsive. Ya sea para presentar productos en un ecommerce, para hacer un portafolio o para presentar una serie de imágenes, hacer una galería de imágenes siempre mola.
Y por si te da un poco de pereza leer, te dejo por aquí el vídeo donde explico como hacer una galería de imágenes en tan solo 10 minutitos.
Para hacer este tipo de galería vamos a hacer primero la estructura html, luego pasaremos a hacer los estilos con CSS grid y finalmente haremos uso de las media queries para hacer la galería de imágenes responsive.
Galería de imágenes en HTML
Pues eso, vamos primero con la estructura HTML. En este caso, trabajaremos con dos divs. Un div o caja será la propia galería de imágenes y otro div la envolverá. Vamos con el código.
<div class="wrap">
<div class="galeria">
<div class="imagen elemento1"><img src="/img/1.jpg" alt=""></div>
<div class="imagen elemento2"><img src="/img/2.jpg" alt=""></div>
<div class="imagen elemento3"><img src="/img/3.jpg" alt=""></div>
<div class="imagen elemento4"><img src="/img/4.jpg" alt=""></div>
<div class="imagen elemento5"><img src="/img/5.jpg" alt=""></div>
<div class="imagen elemento6"><img src="/img/6.jpg" alt=""></div>
<div class="imagen elemento7"><img src="/img/7.jpg" alt=""></div>
<div class="imagen elemento8"><img src="/img/8.jpg" alt=""></div>
<div class="imagen elemento9"><img src="/img/9.jpg" alt=""></div>
<div class="imagen elemento10"><img src="/img/10.jpg" alt=""></div>
<div class="imagen elemento11"><img src="/img/11.jpg" alt=""></div>
<div class="imagen elemento12"><img src="/img/12.jpg" alt=""></div>
</div>
</div>Y ahora vamos con los estilos.
Galería de imágenes en CSS Grid
Como he comentado antes, vamos a hacer unos estilos muy sencillos para hacer una galería en CSS simple (pero poderosa). Para ello, primero agregaremos la hoja de estilos en el archivo HTML.
Empezaremos marcando la anchura de las imágenes y luego marcaremos las propiedades de la clase galería.
.imagen{
width: 100%;
}
.imagen img{
width: 100%;
}
.galeria{
width: 100%;
margin: auto;
display: grid;
grid-template-columns: repeat(3,1fr);
column-gap: 1rem;
row-gap: 1rem;
}Una vez maquetada la galería, ya solo falta convertirla en responsive. Que es elsiguiente paso que vamos a ver.
Galería de imágenes responsive
Para hacer responsive este diseño y que se vea bien en cualquier dispositivo, como smartphone, tablet, etc. vamos a usar las media queries, que son de un módulo de CSS que nos permite adaptar nuestro diseño.
Vamos a trabajar con 4 media queries diferentes. Pero tranquilo, no te asustes, tiene una explicación muy sencilla.
Vamos a utilizar una medida para cada columna. De manera que el número de columnas de la galería irá en función del ancho de la pantalla donde se visualice. Véase el código a continuación.
@media (min-width:100px){
.galeria{
grid-template-columns: repeat(1, 1fr);
}
}
@media (min-width:520px){
.galeria{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width:728px){
.galeria{
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width:1024px){
.galeria{
grid-template-columns: repeat(4, 1fr);
}
}De esta forma, en las pantallas más pequeñas se verá solo una columna. Mientras que en las pantallas más grandes (mínimo 1024px) se verán las 4 columnas. Si se ve en una tablet o un dispositivo similar se verán entre 3 y 2 columnas, dependiendo de si es de menos de 728px o 520px.
Para hacer este ejemplo, hemos utilizado las medidas más comunes de las media queries.
Y hasta aquí el ejemplo de hoy. Si tienes alguna duda o sugerencia puedes dejármela en los comentarios y te responderé.