Responsive Dynamic Justified Grid Layout Plugin – uhugrid

Category: Javascript , Layout , Recommended | February 7, 2023
Author:cipherlogs
Views Total:94 views
Official Page:Go to website
Last Update:February 7, 2023
License:MIT

Preview:

Responsive Dynamic Justified Grid Layout Plugin – uhugrid

Description:

uhugrid is a lightweight JavaScript layout plugin for creating responsive, dynamic, and justified grid layouts.

The layout plugin ensures that all grid items are aligned and spaced evenly, creating a seamless and smooth browsing experience.

How to use it:

1. Install & download.

# NPM
$ npm i uhugrid

2. Import the uhugrid plugin.

<script src="https://cdn.jsdelivr.net/npm/uhugrid/plug.min.js"></script>
// OR
import {uhu} from "./index.js";

3. Add grid items to the uhugrid.

<div class="gallery">
  <div class="gallery__item">
    <img src="1.webp" alt="">
    <div class="overlay"></div>
  </div>
  <div class="gallery__item">
    <img src="2.webp" alt="">
    <div class="overlay"></div>
  </div>
  <div class="gallery__item">
    <img src="3.webp" alt="">
    <div class="overlay"></div>
  </div>
  <!-- More Items Here -->
</div>

4. Initialize the plugin and pass the following parameters to the uhu() method.

  • column_size: Column size (0 – 40). Setting to 0 or undefined will automatically choose the best column size depending on the display width of the user
  • maximum_row_height: Maximum row height. 1 = all rows will stay at 100px height. 0 or undefined = choose the most aesthetic height range related to column size. 3 = randomly generate rows that are 100px, 200px, 300px in height
// uhu (column_size, maximum_row_height)
uhu(1, 1);

You Might Be Interested In:


Leave a Reply