Author: | WebReflection |
---|---|
Views Total: | 611 views |
Official Page: | Go to website |
Last Update: | December 10, 2020 |
License: | MIT |
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>