{"id":14990401,"url":"https://github.com/andreasbm/masonry-layout","last_synced_at":"2025-10-13T02:05:14.838Z","repository":{"id":51989850,"uuid":"167713411","full_name":"andreasbm/masonry-layout","owner":"andreasbm","description":"An efficient and fast web component that gives you a beautiful masonry layout","archived":false,"fork":false,"pushed_at":"2023-09-29T12:06:49.000Z","size":7313,"stargazers_count":136,"open_issues_count":8,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T20:01:36.318Z","etag":null,"topics":["customelements","grid","layout","masonry","masonry-layout","vanilla-js","webcomponents"],"latest_commit_sha":null,"homepage":"https://codepen.io/andreasbm/pen/gOOdqVy","language":"TypeScript","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/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-01-26T16:52:27.000Z","updated_at":"2025-03-07T20:37:06.000Z","dependencies_parsed_at":"2024-06-18T18:19:48.323Z","dependency_job_id":"e7d2af76-caa0-4060-b4b9-ad04f75425d2","html_url":"https://github.com/andreasbm/masonry-layout","commit_stats":{"total_commits":103,"total_committers":3,"mean_commits":"34.333333333333336","dds":"0.11650485436893199","last_synced_commit":"a8a551324ca1917dc55d6b1ccb018c950187f42a"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fmasonry-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fmasonry-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fmasonry-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fmasonry-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/masonry-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"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":["customelements","grid","layout","masonry","masonry-layout","vanilla-js","webcomponents"],"created_at":"2024-09-24T14:20:04.797Z","updated_at":"2025-10-13T02:05:09.781Z","avatar_url":"https://github.com/andreasbm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003ch1 align=\"center\"\u003e@appnest/masonry-layout\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@appnest/masonry-layout?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@appnest/masonry-layout.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@appnest/masonry-layout\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@appnest/masonry-layout.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://david-dm.org/andreasbm/masonry-layout\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/andreasbm/masonry-layout.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://github.com/andreasbm/masonry-layout/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/andreasbm/masonry-layout.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.webcomponents.org/element/@appnest/masonry-layout\"\u003e\u003cimg alt=\"Published on webcomponents.org\" src=\"https://img.shields.io/badge/webcomponents.org-published-blue.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eAn efficient and fast web component that gives you a beautiful masonry layout\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e Go here to see a demo \u003ca href=\"https://appnest-demo.firebaseapp.com/masonry-layout\"\u003ehttps://appnest-demo.firebaseapp.com/masonry-layout\u003c/a\u003e.\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/masonry-layout/master/example.gif\" width=\"600\"\u003e\n\u003c/p\u003e\n\n* **Simple:** Works right out of the box (just add it to your markup)\r\n* **Lightweight:** Super small (1kb minified \u0026 gzipped)\r\n* **Zero dependencies:** Created using only vanilla js - no dependencies and framework agnostic!\r\n* **Customizable:** Can customize almost everything (eg. columns, transitions, gap).\r\n* **User friendly:** Automatically re-distribute items when the size of the grid changes or new elements are added\r\n* **Performant:** Efficient \u0026 fast - Build with performance in mind\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#installation)\r\n\r\n## ➤ Installation\n\n```javascript\nnpm i @appnest/masonry-layout\n```\n\nIf you prefer to use `umd` bundle you can load `https://unpkg.com/@appnest/masonry-layout/umd/masonry-layout.min.js` instead.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#example)\r\n\r\n## ➤ Example\n\nImport `@appnest/masonry-layout` somewhere in your code and you're ready to go! Simply add the `masonry-layout` element to your `html` and then add your elements in between the start and closing tags.\n\n```html\n\u003cmasonry-layout\u003e\n  \u003cdiv\u003e1\u003c/div\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n  \u003cdiv\u003e3\u003c/div\u003e\n  \u003cdiv\u003e4\u003c/div\u003e\n  \u003cdiv\u003e5\u003c/div\u003e\n\u003c/masonry-layout\u003e\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#customize)\r\n\r\n## ➤ Customize\n\nCustomize the functionality by applying the attributes.\n\n### Amount of columns\n\nThe `cols` attribute specifies the amount of columns. The default value is `auto` which ensures to distribute the elements based on the available width.\n\n```html\n\u003cmasonry-layout cols=\"5\"\u003e\n  ...\n\u003c/masonry-layout\u003e\n```\n\n### Gap between columns and rows\n\nThe `gap` attribute specifies how many pixels the gap between the elements should be. The default value is `24px`.\n\n```html\n\u003cmasonry-layout gap=\"50\"\u003e\n  ...\n\u003c/masonry-layout\u003e\n```\n\n### Max column width\n\nThe `maxcolwidth` specifies how many pixels a column can maximum have when the `cols` attribute is set to `auto`. The default value is `400px`.\n\n```html\n\u003cmasonry-layout maxcolwidth=\"200\"\u003e\n  ...\n\u003c/masonry-layout\u003e\n```\n\n### Change debounce time\n\nThe `debounce` attribute specifies the amount of time in ms the layout reflow debounces each time the size of the masonry layout changes. This reflow is debounced to avoid the layout algorithm being invoked too many times in a row. The default value is `300ms`.\n\n```html\n\u003cmasonry-layout debounce=\"500\"\u003e\n  ...\n\u003c/masonry-layout\u003e\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#trigger-layout)\r\n\r\n## ➤ Trigger layout\n\nIf you want to force layout to can call the `layout()` function on the masonry layout.\n\n```js\ndocument.querySelector(\"masonry-layout\").layout();\n```\n\nIf you wish to debounce the layout you can call the `scheduleLayout()` function instead.\n\n```js\ndocument.querySelector(\"masonry-layout\").scheduleLayout();\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#overview)\r\n\r\n## ➤ Overview\n\nHere's a complete overview of the element.\n\n### masonry-layout\n\nMasonry layout web component. It places the slotted elements in the optimal position based\non the available vertical space, just like mason fitting stones in a wall.\n\n#### Example\n\n```html\n\u003cmasonry-layout\u003e\u003cdiv class=\"item\"\u003e\u003c/div\u003e\u003cdiv class=\"item\"\u003e\u003c/div\u003e\u003c/masonry-layout\u003e\n```\n\n#### Properties\n\n| Property       | Attribute     | Type               | Description                                      |\n|----------------|---------------|--------------------|--------------------------------------------------|\n| `cols`         | `cols`        | `number \\| \"auto\"` | The amount of columns.                           |\n| `debounce`     | `debounce`    | `number`           | The ms of debounce when the element resizes.     |\n| `gap`          | `gap`         | `number`           | The gap in pixels between the columns.           |\n| `layout`       |               |                    |                                                  |\n| `maxColWidth`  | `maxcolwidth` | `number`           | The maximum width of each column if cols are set to auto. |\n| `onResize`     |               |                    |                                                  |\n| `onSlotChange` |               |                    |                                                  |\n\n#### Methods\n\n| Method           | Type                                    | Description                                      |\n|------------------|-----------------------------------------|--------------------------------------------------|\n| `layout`         | `(): void`                              | Layouts the elements.                            |\n| `onResize`       | `(entries?: object \\| undefined): void` | Each time the element resizes we need to schedule a layout\u003cbr /\u003eif the amount available columns has has changed. |\n| `onSlotChange`   | `(): void`                              |                                                  |\n| `renderCols`     | `(colCount: number): void`              | Render X amount of columns.                      |\n| `scheduleLayout` | `(ms?: number): void`                   | Schedules a layout.                              |\n\n#### Slots\n\n| Name | Description                                     |\n|------|-------------------------------------------------|\n|      | Items that should be distributed in the layout. |\n\n#### CSS Shadow Parts\n\n| Part           | Description                                      |\n|----------------|--------------------------------------------------|\n| `column`       | Each column of the masonry layout.               |\n| `column-index` | The specific column at the given index (eg. column-0 would target the first column and so on) |\n\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#support-for-old-browsers)\r\n\r\n## ➤ Support for old browsers\n\nIf you are going to support older browsers that doesn't support [Custom Elements](https://caniuse.com/#search=Custom%20Elements), [Shadow Dom](https://caniuse.com/#search=shadow%20root) or [ResizeObservers](https://caniuse.com/#search=resize%20observer) you should polyfill the features. You can do this very easily by using [the brilliant polfiller service](https://github.com/wessberg/polyfiller). This can be done in one line of code by adding the following to your `index.html` before you import the `masonry-layout`.\n\n```html\n\u003cscript crossorigin src=\"https://polyfill.app/api/polyfill?features=es,template,shadow-dom,custom-elements,resizeobserver\"\u003e\u003c/script\u003e\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#license)\r\n\r\n## ➤ License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fmasonry-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fmasonry-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fmasonry-layout/lists"}