https://github.com/cipherlogs/uhugrid
The fast alternative to masonry and mosaic layout.
https://github.com/cipherlogs/uhugrid
collaborate css-grid grid-css masonry masonry-grid masonry-js masonry-layout mosaic mosaic-images
Last synced: 6 months ago
JSON representation
The fast alternative to masonry and mosaic layout.
- Host: GitHub
- URL: https://github.com/cipherlogs/uhugrid
- Owner: cipherlogs
- License: gpl-3.0
- Created: 2022-10-15T14:18:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-07T10:04:15.000Z (almost 2 years ago)
- Last Synced: 2025-04-02T10:51:22.311Z (6 months ago)
- Topics: collaborate, css-grid, grid-css, masonry, masonry-grid, masonry-js, masonry-layout, mosaic, mosaic-images
- Language: JavaScript
- Homepage: https://cipherlogs.github.io/uhugrid/
- Size: 1.61 MB
- Stars: 202
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Why?
**UHUGRID** is named for its default behavior of gluing all items together
and not wasting any free space.
Every time the page is refreshed or a layout change is requested,
a new layout is generated, even if the screen size stays the same.
It is the best alternative when:
1. Each card contains little to no inner content
2. The number of cards is dynamic, unknown, or might change in the future
3. You want the layout to be future-proof so you never have to worry about code maintenance
Due to these limitations, cards are not bound by their content dimensions.
This allows **UHUGRID** to generate visually appealing cards using aspect ratios
that fit best for the current screen size and available free space.
**This is something that Masonry cannot do.**
*For more information about speed comparison against native Masonry or other libraries,
see the [FAQ](FAQ.md).*
# Live demo
To access a simple live example [Click here](https://cipherlogs.github.io/uhugrid/demo/)
# How to
Watch this walkthrough to understand some basics that might save you time.
[Watch on YouTube](https://youtu.be/PT3ZhB4-Y40)
# Install
### 1. CDN
```
https://cdn.jsdelivr.net/npm/uhugrid/plug.min.js
```
Just inject it in you HTML markup and the rest will be taken care of!
Make sure to read about how to structure your markup so that it can be activated.
### 2. NPM
```
$ npm install --save-dev uhugrid
```
# Usage
`.gallery` for the parent container
and `.gallery__item` for all its children.
```HTML
```
The plugin comes with the basic styling necessary for it to work properly.
You are responsible for styling `.gallery__item` and its content as you desire.
Overriding `.gallery` and `.gallery__item` is the correct way to use the library.
Please watch the [**How to**](#how-to) video to understand
some important details before you override any styles.
# API
The `uhu()` method controls the column size and the maximum height
for each row.
```JavaScript
uhu();
// everthing will be taken care of by default
uhu(1, 1);
// all grid items will have the same height
// items width are always different and can't be controlled
uhu(0, 2)
// column width will be calculated according to the viewport width
//
// The row height is a range from 1 to 2
// it could be 100px height or 200px height
//
// items width as always will be generated randomly to
// aesthetically match the row height
```
#### Syntax
> uhu (column_size, maximum_row_height)
#### Paramaters
+ column_size **optional**: a range from 1 to 40,
1 is approximately `100px`. If you insert `0` or `undefined`,
**UHUGRID** will choose the best column size depending on
the display width of the user.
By default it can scale up to 4K displays.
+ maximum_row_height **optional**: for example if you insert 3,
**UHUGRID** will randomly generate rows that are
`100px`, `200px`, `300px` in height.
If you insert 1, all rows will stay at `100px` height.
`0` or `undefined` to let **UHUGRID** choose the most
aesthetic height range related to column size.
# FAQ
Visit [FAQ.md](./FAQ.md) to read common questions and design
decisions.
# Changes
+ for upcoming changes take a look at the **Issues** tab.
+ visit [CHANGELOG.md](./CHANGELOG.md) for more information about
each release.
# License
**UHUGRID** is released under the GPL-3.0 license.