<div id="gallery">
<div class="gallery-item">
<img src="https://images.pexels.com/photos/1398059/pexels-photo-1398059.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1532529867795-3c83442c1e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057bcb9879b39b35a6342bec6c24763a&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536572743959-90cb37883a36?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24e1049cf7de63939cbdde78f8775521&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536534891787-3099c041fed8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=08b34a3f3af05958fcac8515b3cf1c37&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536510503602-0ce292ec7169?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=979d2dd3356f3b95d32916f5fdbef6da&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536525061083-c7300e8d945b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=75e78df17161bfe0961905b1d013ffd3&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536539021558-1c10ce35dc23?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e9ba80aae20167e32b7b8271c2f815b&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536528679846-3c5a38e3026b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=132974824a0f7158697a0cfd113b4250&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1528660493888-ab6f4761e036?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d5001b159b56d4e5de6e40917839b5b6&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1526040652367-ac003a0475fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ece4b6fa23a2b2b60f334638b24c24c4&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1525373698358-041e3a460346?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4051df9e2f82d0f19d2df4eb6dbe7711&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1521185496955-15097b20c5fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b73970e97b923e72be9355cb15099091&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536484225676-ec01009e325c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1da8979de1bb699c8ad6c7c4c072cb61&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536486239970-277f67f55a11?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7f307a981169b92aaaf3afd99f648bb&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536483229849-71255a26bbd4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7a2fad712376f332fb7cb3d5f4332b1b&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536420125907-f88cd1df7551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d303f0b02dfb7bea355d22c0d25c43a6&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1520717214176-885c3b3b6ca5?ixlib=rb-0.3.5&s=e576f901cf8b7b49e47722abb1f206b1&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536455459-ff8ea856a79c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05e327a79cba3c04c5f2a54395784fef&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536500288605-54a8edfe9b49?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5a679c3a4b28b2ae0fbc4c3f094acf6f&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536520966144-506178d989a4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=37ae8941929957fcff6e0339c360637f&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536512060368-013a40c3f1c7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=64933abc47c0ebc189d98f40771a7219&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536502977637-d3b9dcb173ec?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c34483158a45f8399e024b30292d977f&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536520897168-9cc27ff5b95a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=faae587646d37442b381fb98bca419ac&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536503421732-d410d2b1e844?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8b27bead4fe78ae9c29ac2a727c6e845&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536500320800-973914fca764?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7e8c051b1c151cb0227233d71aa3ba73&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536439588219-d5c307b1f581?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=803e618633808b3b329c70e3f30b99cd&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536367154356-c2f0b891264e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=80524a795192ed8b4d42c82b0edbec72&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536473703867-4d8fa7bea6dd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86858a1c8533708aa6b5a35e6deee32f&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1536439724038-196cf3225065?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=957b2848215e2190c83cdccb5cc7a72d&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="gallery-item">
<img src="https://images.pexels.com/photos/1398059/pexels-photo-1398059.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Picture">
</div>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.masonry-layout {
--columns: 1;
--grap: 2rem;
$columns: 12;
display: grid;
grid-gap: var(--grap);
grid-template-columns: repeat(var(--columns), 1fr);
margin: 0 1em;
.masonry-item {
display: flex;
justify-content: center;
margin: 1em 0;
}
.gallery-item img {
display: block;
height: 100%;
max-width: 100%;
width: 100%;
}
@for $i from 1 through $columns {
&.columns-#{$i} {
--columns: #{$i};
}
}
}
View Compiled
let gallery = document.getElementById('gallery');
let galleryItem = document.querySelectorAll('.gallery-item');
const masonryLayout = (containerElements, itemsElements, columns) => {
let columnsElements = [];
containerElements.classList.add('masonry-layout', `columns-${columns}`);
for (let i = 1; i <= columns; i++) {
let column = document.createElement('div');
column.classList.add('masonry-column', `column-${i}`);
containerElements.appendChild(column);
columnsElements.push(column);
}
// "row" son las filas y "itemRow" es cada item que hay en cada fila
for (let row = 0; row < Math.ceil(itemsElements.length / columns); row++) {
for (let itemRow = 0; itemRow < columns; itemRow++) {
let item = itemsElements[row * columns + itemRow];
columnsElements[itemRow].appendChild(item);
item.classList.add('masonry-item');
}
}
};
masonryLayout(gallery, galleryItem, 3);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.