ux-ui-pro/masonry-simple

masonry-simple

^{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}

Demo

➤ 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