{"id":16788763,"url":"https://github.com/markmead/js-masonry","last_synced_at":"2025-04-10T23:25:13.152Z","repository":{"id":98519763,"uuid":"559048054","full_name":"markmead/js-masonry","owner":"markmead","description":"Create masonry layouts based on your CSS grid values 🎉 ","archived":false,"fork":false,"pushed_at":"2025-03-07T08:14:37.000Z","size":45,"stargazers_count":25,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T20:12:35.907Z","etag":null,"topics":["javascript","masonry","masonry-grid","masonry-layout"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markmead.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-28T23:02:28.000Z","updated_at":"2025-03-07T21:20:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"6bdf315f-caad-46a3-9e7f-06a9064d0353","html_url":"https://github.com/markmead/js-masonry","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-masonry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-masonry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-masonry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Fjs-masonry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/js-masonry/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313655,"owners_count":21082893,"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":["javascript","masonry","masonry-grid","masonry-layout"],"created_at":"2024-10-13T08:24:43.449Z","updated_at":"2025-04-10T23:25:13.126Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS Masonry\n\nCreate masonry layouts based on your CSS grid values 🎉\n\n![JS Masonry](https://user-images.githubusercontent.com/50486078/196979467-7dde0de1-4d4d-46af-88b0-3978e0dd6af4.jpg)\n\n**Using Alpine JS?** -\n[Use Alpine JS Masonry](https://github.com/markmead/alpinejs-masonry)\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/data-masonry@latest/dist/masonry.min.js\"\n\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nyarn add -D data-masonry\n\nnpm install -D data-masonry\n```\n\n```js\nimport masonry from 'data-masonry'\n\ndocument.addEventListener('DOMContentLoaded', masonry())\n```\n\n## Example\n\n```html\n\u003cul class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\" data-masonry\u003e\n  \u003cli class=\"bg-slate-800 text-white p-4 rounded h-64\"\u003eItem 1\u003c/li\u003e\n  \u003cli class=\"bg-slate-800 text-white p-4 rounded h-32\"\u003eItem 2\u003c/li\u003e\n  \u003cli class=\"bg-slate-800 text-white p-4 rounded h-16\"\u003eItem 3\u003c/li\u003e\n  \u003cli class=\"bg-slate-800 text-white p-4 rounded h-72\"\u003eItem 4\u003c/li\u003e\n  \u003cli class=\"bg-slate-800 text-white p-4 rounded h-48\"\u003eItem 5\u003c/li\u003e\n  \u003cli class=\"bg-slate-800 text-white p-4 rounded h-32\"\u003eItem 6\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nAnd that's it.\n\n_Fixed heights and Tailwind CSS are not necessary 🙅‍♀️_\n\nUnder the hood `data-masonry` will do all the work for you and will even handle\nwhen the user resizes the window.\n\n### Options\n\n#### Delay Building Masonry Grid\n\nIf needed, you can pass the `waitDuration` option with a duration in\nmilliseconds like this.\n\n```html\n\u003cul\n  class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n  data-masonry=\"{ waitDuration: 2500 }\"\n\u003e\n  ...\n\u003c/ul\u003e\n```\n\nThis will trigger the masonry grid to build after 2500ms, this is helpful when\nyou have slow content that takes a while to load. However, I'd recommend using\nthe `pollDuration` option.\n\n#### Rebuilding Masonry Grid Automatically\n\nIf needed, you can pass the `pollDuration` option with a duration in\nmilliseconds like this.\n\n```html\n\u003cul\n  class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n  data-masonry=\"{ pollDuration: 2500 }\"\n\u003e\n  ...\n\u003c/ul\u003e\n```\n\nThis will trigger the masonry grid to reload every 2500ms, this is helpful when\ncontent is being added dynamically.\n\n#### Rebuilding Masonry Grid with an Event\n\nYou can also trigger the `reload:masonry` on the window to trigger the masonry\ngrid to reload.\n\n```js\nconst reloadMasonry = new Event('reload:masonry', {\n  bubbles: true,\n})\n\ndispatchEvent(reloadMasonry)\n```\n\n## Issues\n\n### Grid Items Stretching\n\nThis can be fixed by adding `align-items: flex-start` to the element with\n`display: grid`.\n\n## Stats\n\n![](https://img.shields.io/bundlephobia/min/data-masonry)\n![](https://img.shields.io/npm/v/data-masonry)\n![](https://img.shields.io/npm/dt/data-masonry)\n![](https://img.shields.io/github/license/markmead/js-masonry)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Fjs-masonry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Fjs-masonry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Fjs-masonry/lists"}