MasonrySimple implements a simple system for placing masonry style elements using CSS Grid. Masonry placement is used for dynamic grids where elements may have different heights and need to be placed neatly without gaps.
600B gzipped
➤ Install
$ yarn add masonry-simple
➤ Import
import MasonrySimple from 'masonry-simple';
➤ Usage
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