<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.