masonry-simple

masonry-simple

The MasonrySimple class is designed to create a masonry layout of elements on a page. Vue friendly.

^{600B gzipped}

DEMO

➤ Installation

_Recommended

$ yarn add masonry-simple

_{Not recommended
Import the masonry-simple.min.js file using the <script> tag. You can download it here. In this connection method, no initialisation is required and it is mandatory to specify the `.masonry' class for the html container.}

<script src="path-to-the-file/masonry-simple.min.js"></script>

➤ Import

import MasonrySimple from 'masonry-simple';

➤ Usage

_{The container can be specified in the following formats: a string value representing the class or id of an element in the DOM, such as '.masonry' or '#masonry'. A Vue reactive reference that contains a DOM element.}

const masonry = new MasonrySimple({
  container: '.masonry',
});

masonry.init();

<div class="masonry">
  <div class="masonry__item">
    ...
  </div>
  <div class="masonry__item">
    ...
  </div>
  ...
</div>

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

➤ Destroy

masonry.destroy();

➤ License

^{masonry-simple is released under MIT license}