Minimalist Masonry Layout Solution Using JavaScript And CSS Grid

Preview:

Description:

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>