JSFiddle - React, Tailwind, and code Playground

Masonry

by web-nfo.com

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cache.247web.nl/js/masonry/4.1.1/masonry.pkgd.min.js"></script>
<h1>Masonry - layout method</h1>
<p>Click to toggle item size</p>


<div class="cfs_masonry_grid">
  <div class="grid-item">
    <img class="image" src="https://placehold.it/350x250">
    <h3>Harde cover voor smartphone</h3>
    <p>Vanaf: &euro;9,99</p>
    <a class="button" href="#">Nu maken</a>
  </div>
  
  
<div class="grid-item">
    <img class="image" src="https://placehold.it/350x250">
    <h3 class="title">Hard cover photobook</h3>
    <p class="price">Vanaf: 5,39</p>
    <a class="button" href="#">Nu maken</a>
</div>
  
  
      <div class="grid-item">
    <img class="image" src="https://placehold.it/350x250">
    <h3>Hard cover photobook</h3>
    <p>Vanaf: 5,39</p>
    <a class="button" href="#">Nu maken</a>
  </div>
  
      <div class="grid-item">
    <img class="image" src="https://placehold.it/350x250">
    <h3>Hard cover photobook</h3>
    <p>Vanaf: 5,39</p>
    <a class="button" href="#">Nu maken</a>
  </div>
  
      <div class="grid-item">
    <img class="image" src="https://placehold.it/350x250">
    <h3>Hard cover photobook</h3>
    <p>Vanaf: 5,39</p>
    <a class="button" href="#">Nu maken</a>
  </div>
</div>

CSS

.cfs_masonry_grid, .cfs_masonry_grid * {
  box-sizing: border-box;
}
/* clearfix */
.cfs_masonry_grid:after {
  content: '';
  display: block;
  clear: both;
}
.cfs_masonry_grid .grid-item {
  width: 200px;
  float: left;
  background: #FFF;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}
.cfs_masonry_grid .grid-item .image {
  width: 100%;
}
.cfs_masonry_grid .grid-item .button {
  display:none;
  position: absolute;
  bottom:5px;
  left:5px;
}
.cfs_masonry_grid .grid-item.grid-item-zoomin .button {
  display:block;
}

.cfs_masonry_grid .grid-item--height2 { height: 200px; }
.cfs_masonry_grid .grid-item--height3 { height: 260px; }
.cfs_masonry_grid .grid-item--height4 { height: 360px; }

.cfs_masonry_grid .grid-item-zoomin {
  width: 320px;
  height: 360px;
}
.cfs_masonry_grid .grid-item:hover {
  background: #222;
  border-color: white;
  cursor: pointer;
}

JavaScript

var $cw = jQuery.noConflict()

$cw(document).ready(function() {
	var $grid = $cw('.cfs_masonry_grid').masonry({
  	itemSelector: '.grid-item',
  	columnWidth: 200
	});

	$grid.on( 'click', '.grid-item', function() {
  	// change size of item via class
  	$cw( this ).toggleClass('grid-item-zoomin');
  	// trigger layout
  	$grid.masonry();
	});

});