masonry-simple
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

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.

npm GitHub package version NPM Downloads

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

Package Sidebar

Install

npm i masonry-simple

Weekly Downloads

34

Version

4.0.0

License

MIT

Unpacked Size

31.4 kB

Total Files

15

Last publish

Collaborators

  • ux-ui