Author: | cipherlogs |
---|---|
Views Total: | 94 views |
Official Page: | Go to website |
Last Update: | February 7, 2023 |
License: | MIT |
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);