Masonry grid

Demo

by batcave

HTML

<script src="https://unpkg.com/magic-grid@latest/dist/magic-grid.min.js"></script>
<!DOCTYPE html>
<button class="js-resize">Resize</button>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
</div>

CSS

.container div {
  width: 280px;
  height: 500px;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.container .item1 { height: 200px; }
.container .item4 { height: 800px; }
.container .item6 { height: 600px; }
.container .item11 { height: 400px; }

.container .item--size-large {
  height: 800px;
  background-color: aqua;
}

JavaScript

let magicGrid = new MagicGrid({
  container: '.container',
  animate: true,
  gutter: 30,
  static: true,
  useMin: true
});

magicGrid.listen();

const button = document.querySelector('.js-resize')
button.addEventListener('click', function() {
	document.querySelector('.item2').classList.add('item--size-large')
})