Minimalist Masonry Layout Solution Using JavaScript And CSS Grid

This is a dead-simple Custom Element to implement a basic, responsive Masonry Layout using JavaScript and CSS Grid Layout.

Heavily inspired by A Lightweight Masonry Solution.

How to use it:

1. Import the Custom Element from a CDN.

<script src="https://unpkg.com/masonry-rows"></script>

2. Add items to the Masonry grid.

<masonry-rows>
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  ...
</masonry-rows>

3. Determine the minimum width of the Masonry items.

<masonry-rows min-width="20em">
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  ...
</masonry-rows>

4. Determine the space between the Masonry items.

<masonry-rows gap=".5em">
  <img src="1.jpg" />
  <img src="1.jpg" />
  <img src="1.jpg" />
  ...
</masonry-rows>