La galería de imágenes de una página web puede tener estilos diferentes, dependiendo de la finalidad, si son para mostrar imágenes de un producto, para un blog o cualquier otro propósito. Uno de los diseños con los que se puede encontrar una galería de imágenes es con el estilo masonry, similar a como lo tiene Pinterest.
En el siguiente vídeo, el profesor del bootcamp, Sergio Jiménez, te muestra cómo conseguir una galería con estilo masonry utilizando CSS.
Aceptar el consentimiento para ver esto
En este caso, Sergio llama dentro del archivo HTML a diferentes imágenes, cada una de un tamaño distinto, que las sitúa cada una dentro de un div distinto, que a su vez forman parte de un div conjunto al que le da la siguiente clase: class=»container». Si estos div tuvieran contenido con extensión diversa, se podría conseguir el mismo efecto al obtener altos diferentes.
Para empezar, Sergio resetea los márgenes y aplica unas cuantas propiedades al body. De esta forma, se consigue un código similar al siguiente:
* {
margin: 0;
}
body {
background-color: lightgray;
margin: 3vw;
scroll-behaviour: smooth;
}
Después, se empieza a trabajar con el diseño de cómo quedarán las imágenes utilizando el div general que contiene todas las imágenes y estableciendo el tamaño de las imágenes dentro del contenedor. Con el siguiente código ya podrás apreciar el estilo masonry en la galería de imágenes:
.container {
columns: 3;
}
.container div img {
width: 100%;
}
No obstante, para controlar mejor los elementos dentro de la galería, puedes añadirle el siguiente código:
.container {
columns: 3;
column-gap: 1.2rem;
}
.container div {
margin-botton: 1.2rem;
}
.container div img {
width: 100%;
margin-botton: -4px;
border-radious: 1rem;
}
Así puedes controlar la separación entre las imágenes, darle un radio en las esquinas de las imágenes.
Finalmente, se le añade el diseño responsive para los dispositivos móviles y tablets, utilizando un fragmento de código CSS como el siguiente:
@media (width <= 1200px) {
.container{
columns: 2;
}
}
@media (width <= 600px) {
.container{
columns: 1;
}
}
Esta es solo una forma de conseguir el estilo masonry para una galería de imágenes con CSS, pero hay otras formas con las que conseguir el mismo efecto.
Si quieres aprender más trucos sobre CSS y otras tecnologías como HTML, JavaScript o MySQL, inscríbete a nuestro Bootcamp Full Stack Web Developer y empieza a construir proyectos web desde cero.
