masonryJS_Test

by niuuin

HTML

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.js"></script>
</head>

<body>
  <div class="grid">
    <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
     <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
     <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
     <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
     <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
     <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
     <div class="grid-item">
      <img src="https://dummyimage.com/600x400/a3c3ff/6469ad" alt="">
    </div>
  </div>
</body>

CSS

body {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

.grid {
  width: 90%;
  margin: 0 auto;
}

.grid-item {
  float: left;
  box-sizing: border-box;
  width: 33.33333%;
  padding: .2rem;
}