Responsive Dynamic Justified Grid Layout Plugin – uhugrid

Preview:

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);