Ejemplos del blog 10 trucos de CSS que te van a sorprender

Crear un layout masonry

Seguramente ya has visto el layout masonry en sitios como Pinterest . En este layout los elementos se ordenan de forma óptima teniendo en cuenta el espacio vertical disponible.

¿Sabías que necesitas menos de 5 líneas de código CSS para conseguirlo?

Como ya hemos hecho antes, primero se debe definir el HTML que se va a utilizar. En este caso, el HTML consta de imágenes de diferentes alturas. Para conseguir imágenes aleatorias puedes usar la API de Picsum .

<div class="container-masonry">
            <img src="https://picsum.photos/200/250" alt="Imagen muestra">
            <img src="https://picsum.photos/200/150" alt="Imagen muestra">
            <img src="https://picsum.photos/200/234" alt="Imagen muestra">
            <img src="https://picsum.photos/200/144" alt="Imagen muestra">
            <img src="https://picsum.photos/200/421" alt="Imagen muestra">
            <img src="https://picsum.photos/200/342" alt="Imagen muestra">
            <img src="https://picsum.photos/200/333" alt="Imagen muestra">
            <img src="https://picsum.photos/200/152" alt="Imagen muestra">
            <img src="https://picsum.photos/200/300" alt="Imagen muestra">
            <img src="https://picsum.photos/200/275" alt="Imagen muestra">
            </div>
            

En el CSS solo se tiene que indicar el ancho y el máximo de columnas que tendrá el layout. Esto se hace con las propiedades de column-width y column-count respectivamente, para obtener el ordenamiento deseado.

div.container {
                column-count: 4;
                column-width: 200px;
                padding: 20px;
            }

            img {
                width: 100%;
                max-width: 100%;
                margin-bottom: 15px;
            }