{"id":18994020,"url":"https://github.com/cipherlogs/uhugrid","last_synced_at":"2025-04-09T17:22:02.171Z","repository":{"id":61495438,"uuid":"551973416","full_name":"cipherlogs/uhugrid","owner":"cipherlogs","description":"The fast alternative to  masonry and mosaic layout.","archived":false,"fork":false,"pushed_at":"2023-11-07T10:04:15.000Z","size":1687,"stargazers_count":202,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T10:51:22.311Z","etag":null,"topics":["collaborate","css-grid","grid-css","masonry","masonry-grid","masonry-js","masonry-layout","mosaic","mosaic-images"],"latest_commit_sha":null,"homepage":"https://cipherlogs.github.io/uhugrid/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cipherlogs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-10-15T14:18:50.000Z","updated_at":"2024-12-09T13:38:17.000Z","dependencies_parsed_at":"2023-01-27T07:46:08.329Z","dependency_job_id":"beacd6a9-250d-4472-9ba2-a02ff73d2de6","html_url":"https://github.com/cipherlogs/uhugrid","commit_stats":{"total_commits":58,"total_committers":2,"mean_commits":29.0,"dds":"0.39655172413793105","last_synced_commit":"4fe3a9de3b41453a8cf8157af4ff68d8f5132b44"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Fuhugrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Fuhugrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Fuhugrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipherlogs%2Fuhugrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cipherlogs","download_url":"https://codeload.github.com/cipherlogs/uhugrid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248075140,"owners_count":21043530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collaborate","css-grid","grid-css","masonry","masonry-grid","masonry-js","masonry-layout","mosaic","mosaic-images"],"created_at":"2024-11-08T17:23:50.243Z","updated_at":"2025-04-09T17:22:02.146Z","avatar_url":"https://github.com/cipherlogs.png","language":"JavaScript","readme":"![UHUGRID poster](./imgs/2.jpg)\n\n\u003cbr\u003e\n\n\n# Why?\n\n**UHUGRID** is named for its default behavior of gluing all items together\nand not wasting any free space.\n\nEvery time the page is refreshed or a layout change is requested,\na new layout is generated, even if the screen size stays the same.\n\nIt is the best alternative when:\n\n1. Each card contains little to no inner content\n2. The number of cards is dynamic, unknown, or might change in the future\n3. You want the layout to be future-proof so you never have to worry about code maintenance\n\n\u003cbr\u003e\n\nDue to these limitations, cards are not bound by their content dimensions.\nThis allows **UHUGRID** to generate visually appealing cards using aspect ratios\nthat fit best for the current screen size and available free space.\n\n**This is something that Masonry cannot do.**\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n*For more information about speed comparison against native Masonry or other libraries,\nsee the [FAQ](FAQ.md).*\n  \n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Live demo\nTo access a simple live example [Click here](https://cipherlogs.github.io/uhugrid/demo/)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# How to\nWatch this walkthrough to understand some basics that might save you time.\n\n[Watch on YouTube](https://youtu.be/PT3ZhB4-Y40)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Install\n\n### 1. CDN\n\n```\nhttps://cdn.jsdelivr.net/npm/uhugrid/plug.min.js\n```\n\nJust inject it in you HTML markup and the rest will be taken care of!\nMake sure to read about how to structure your markup so that it can be activated.\n\n\u003cbr\u003e\n\n### 2. NPM\n\n```\n$ npm install --save-dev uhugrid\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Usage\n`.gallery` for the parent container\nand `.gallery__item` for all its children.\n\n\n```HTML\n\u003cdiv class=\"gallery\"\u003e\n\n  \u003cdiv class=\"gallery__item\"\u003e\n    \u003c!-- PLACE WHEREVER YOU WANT IN HERE --\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\u003cbr\u003e\n\nThe plugin comes with the basic styling necessary for it to work properly. \nYou are responsible for styling `.gallery__item` and its content as you desire. \n\nOverriding `.gallery` and `.gallery__item` is the correct way to use the library.\nPlease watch the [**How to**](#how-to) video to understand\nsome important details before you override any styles.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# API\n\nThe `uhu()` method controls the column size and the maximum height\nfor each row.\n\n\n```JavaScript\nuhu();\n// everthing will be taken care of by default\n\nuhu(1, 1);\n// all grid items will have the same height\n// items width are always different and can't be controlled\n\nuhu(0, 2)\n// column width will be calculated according to the viewport width\n//\n// The row height is a range from 1 to 2\n// it could be 100px height or 200px height\n//\n// items width as always will be generated randomly to\n// aesthetically match the row height\n```\n\n#### Syntax\n\n\u003e uhu (column_size, maximum_row_height)\n\n\n#### Paramaters\n\n+ column_size **optional**: a range from 1 to 40,\n  1 is approximately `100px`. If you insert `0` or `undefined`,\n  **UHUGRID** will choose the best column size depending on\n  the display width of the user.\n  By default it can scale up to 4K displays.\n\n+ maximum_row_height **optional**: for example if you insert 3,\n  **UHUGRID** will randomly generate rows that are\n  `100px`, `200px`, `300px` in height.\n  If you insert 1, all rows will stay at `100px` height.\n  `0` or `undefined` to let **UHUGRID** choose the most\n  aesthetic height range related to column size.\n  \n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# FAQ\nVisit [FAQ.md](./FAQ.md) to read common questions and design\ndecisions.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Changes\n\n+ for upcoming changes take a look at the **Issues** tab.\n+ visit [CHANGELOG.md](./CHANGELOG.md) for more information about\n  each release.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n# License\n**UHUGRID** is released under the GPL-3.0 license.\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipherlogs%2Fuhugrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcipherlogs%2Fuhugrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipherlogs%2Fuhugrid/lists"}