Masonry Gallery

How it works

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Masonry

<!-- Plugin Js -->
<script src="assets/bundles/masonry.bundle.js"></script>

<!-- HTML -->
<div class="row m-grid g-2" data-masonry='{ "itemSelector": ".grid-item" }'>
	<div class="col grid-item"><img class="img-fluid rounded-4" src="img url here" alt="" ></div>
</div>

<!-- Page Js -->
<script>
	$('.m-grid').masonry({
		// options...
		itemSelector: '.grid-item',
	});
</script>