Simple Masonry Grid Layout With Flexbox – simple-masonry.js

A lightweight Vanilla JS library to help you generate a responsive, mobile-friendly Masonry grid layout using CSS flexbox.

How to use it:

1. Load the simple-masonry.css and simple-masonry.js in the document.

<link rel="stylesheet" href="simple-masonry.css" />
<script src="simple-masonry.js"></script>
<!-- IE 11 Support -->
<script src="simple-masonry-ie11.js"></script>

2. Create an HTML unordered list for the Masonry grid layout.

<ul class="js-masonry-list">
  <li class="js-masonry-elm">
    <img src="1.jpg" alt="" width="400" height="300" />
  </li>
  <li class="js-masonry-elm">
    <img src="2.jpg" alt="" width="400" height="300" />
  </li>
  <li class="js-masonry-elm">
    <img src="3.jpg" alt="" width="400" height="300" />
  </li>
  ....
</ul>

3. Initialize the Masonry grid layout. That’s it.

masonry({
  // options here
});

4. Set the number of columns. Default: 1.

masonry({
  column: 5
});

5. You can also specify the number of columns for each screen solution.

masonry({
  responsive: [{
    breakpoint: 1024, 
    column: 3
  }, {
    breakpoint: 600,
    column: 2
  }, {
    breakpoint: 450,
    column: 1
  }]
});

6. Default CSS selectors.

masonry({
  target: '.js-masonry-list',
  activeClass: 'is-active',
  listClass: '.js-masonry-list', 
  listElmsClass: '.js-masonry-elm',
});

Changelog:

03/11/2022

• Bugfix