The MasonrySimple class is designed to create a masonry layout of elements on a page. Vue friendly.
600B gzipped
➤ 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