Get started with masonry CDN

MIT licensed

Masonry: library for flexible, responsive grid layouts.

Tags:
  • jquery
  • layout
  • float
  • grid

Stable version

Copied!

How to start using masonry CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/masonry/4.2.2/masonry.pkgd.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const container = document.querySelector('.grid');
      masonry(container, {
        columnWidth: '.grid-item',
        percentPosition: true,
        gutter: '.gutter-sizer'
      });
    });
  </script>
  <style>
    .grid {
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
    }
    .grid-item {
      width: 200px;
      height: 300px;
      background-color: #f5f5f5;
      margin-bottom: .5rem;
    }
    .gutter-sizer {
      width: 1rem;
      height: 1rem;
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="grid-item" data-masonry-animate>Item 1</div>
    <div class="grid-item" data-masonry-animate>Item 2</div>
    <div class="grid-item" data-masonry-animate>Item 3</div>
    <div class="grid-item" data-masonry-animate>Item 4</div>
    <div class="grid-item" data-masonry-animate>Item 5</div>
    <div class="grid-item" data-masonry-animate>Item 6</div>
  </div>
</body>
</html>
Copied!
Copied!

All versions