{"id":16788741,"url":"https://github.com/markmead/alpinejs-masonry","last_synced_at":"2025-04-07T13:04:59.553Z","repository":{"id":61815168,"uuid":"554731544","full_name":"markmead/alpinejs-masonry","owner":"markmead","description":"Create masonry layouts based on your CSS grid values 🎉","archived":false,"fork":false,"pushed_at":"2025-03-07T08:12:46.000Z","size":64,"stargazers_count":94,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T12:04:07.850Z","etag":null,"topics":["alpine-js","alpinejs","alpinejs-plugin","javascript","masonry","masonry-grid","masonry-layout"],"latest_commit_sha":null,"homepage":"https://js.hyperui.dev/examples/layout-masonry","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-20T09:48:00.000Z","updated_at":"2025-03-23T02:47:15.000Z","dependencies_parsed_at":"2024-01-24T11:31:54.822Z","dependency_job_id":"efb086f5-06fe-4ed1-9c37-3da46bfc0a8f","html_url":"https://github.com/markmead/alpinejs-masonry","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"markmead/alpinejs-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-masonry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-masonry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-masonry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markmead%2Falpinejs-masonry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markmead","download_url":"https://codeload.github.com/markmead/alpinejs-masonry/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247657276,"owners_count":20974344,"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":["alpine-js","alpinejs","alpinejs-plugin","javascript","masonry","masonry-grid","masonry-layout"],"created_at":"2024-10-13T08:24:34.866Z","updated_at":"2025-04-07T13:04:59.532Z","avatar_url":"https://github.com/markmead.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alpine JS Masonry\n\nCreate masonry layouts based on your CSS grid values 🎉\n\n![Alpine JS Masonry](https://user-images.githubusercontent.com/50486078/196979467-7dde0de1-4d4d-46af-88b0-3978e0dd6af4.jpg)\n\n**Not Using Alpine JS?** -\n[Use JS Masonry](https://github.com/markmead/js-masonry)\n\n## Install\n\n### With a CDN\n\n```html\n\u003cscript\n  defer\n  src=\"https://unpkg.com/alpinejs-masonry@latest/dist/masonry.min.js\"\n\u003e\u003c/script\u003e\n\n\u003cscript defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"\u003e\u003c/script\u003e\n```\n\n### With a Package Manager\n\n```shell\nyarn add -D alpinejs-masonry\n\nnpm install -D alpinejs-masonry\n```\n\n```js\nimport Alpine from 'alpinejs'\nimport masonry from 'alpinejs-masonry'\n\nAlpine.plugin(masonry)\n\nAlpine.start()\n```\n\n## Example\n\n```html\n\u003cul class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\" x-data x-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 `x-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 `wait` modifier with a duration in milliseconds like\nthis.\n\n```html\n\u003cul class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\" x-data x-masonry.wait.2500\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 `poll` modifier.\n\n#### Rebuilding Masonry Grid Automatically\n\nIf needed, you can pass the `poll` modifier with a duration in milliseconds like\nthis.\n\n```html\n\u003cul class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-4\" x-data x-masonry.poll.2500\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\nThis can be done easily with `$dispatch('reload:masonry')` in Alpine JS.\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/alpinejs-masonry)\n![](https://img.shields.io/npm/v/alpinejs-masonry)\n![](https://img.shields.io/npm/dt/alpinejs-masonry)\n![](https://img.shields.io/github/license/markmead/alpinejs-masonry)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-masonry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkmead%2Falpinejs-masonry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkmead%2Falpinejs-masonry/lists"}