Minimalist Masonry Layout Solution Using JavaScript And CSS Grid

Category: Javascript , Layout , Recommended | December 10, 2020
Author: WebReflection
Views Total: 194 views
Official Page: Go to website
Last Update: December 10, 2020
License: MIT

Preview:

Minimalist Masonry Layout Solution Using JavaScript And CSS Grid

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>

You Might Be Interested In:


Leave a Reply