JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item"><img src="https://paleopines.com/wp-content/uploads/2023/10/job_sketch_tri.jpg.webp" alt="" /></div>
<div class="grid-item grid-item--width2"><img src="https://paleopines.com/wp-content/uploads/2023/10/envrio_thumbs.png.webp" alt="" /></div>
<div class="grid-item"><img src="https://paleopines.com/wp-content/uploads/2023/10/Pippin1.png.webp" alt="" /></div>
<div class="grid-item"><img src="https://paleopines.com/wp-content/uploads/2023/10/Marlo_House_Concept.png-scaled.webp" alt="" /></div>
<div class="grid-item"><img src="https://paleopines.com/wp-content/uploads/2023/10/Plains_1_V2_edit.jpg.webp" alt="" /></div>
<div class="grid-item"><img src="https://paleopines.com/wp-content/uploads/2023/10/Tall_Trees.png.webp" alt="" /></div>
</div>

CSS

img {
  max-width: 100%;
}

.grid {
	margin: 0 auto;
	display: block;
  width: 95%;
  max-width: 1280px;
}

.grid-sizer, .grid-item {
	width: 100px;
}

.grid-item--width2 {
	width: 200px;
}

JavaScript

let $masonry = $('.grid').masonry({
		// options
		itemSelector: '.grid-item',
		gutter: 20,
		fitWidth: true,
		columnWidth: '.grid-sizer',
		percentPosition: true
		//transitionDuration: '0.2s'
		// horizontalOrder: true
		//columnWidth: 200
	});
	$(window).resize(function(){
		//$masonry.masonry('reloadItems');
	});