{"id":15099503,"url":"https://github.com/vpusher/the-grid","last_synced_at":"2025-04-14T12:31:40.578Z","repository":{"id":57741624,"uuid":"86707262","full_name":"vpusher/the-grid","owner":"vpusher","description":"Grid layout custom element with drag and drop capabilities","archived":false,"fork":false,"pushed_at":"2018-11-28T12:50:14.000Z","size":379,"stargazers_count":130,"open_issues_count":12,"forks_count":32,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-28T01:48:33.391Z","etag":null,"topics":["drag-and-drop","grid","layout","polymer","resize","webcomponents"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/vpusher/the-grid","language":"HTML","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/vpusher.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-30T13:43:59.000Z","updated_at":"2024-11-28T05:19:19.000Z","dependencies_parsed_at":"2022-09-05T20:41:18.950Z","dependency_job_id":null,"html_url":"https://github.com/vpusher/the-grid","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpusher%2Fthe-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpusher%2Fthe-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpusher%2Fthe-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vpusher%2Fthe-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vpusher","download_url":"https://codeload.github.com/vpusher/the-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248881527,"owners_count":21176868,"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":["drag-and-drop","grid","layout","polymer","resize","webcomponents"],"created_at":"2024-09-25T17:22:20.840Z","updated_at":"2025-04-14T12:31:40.547Z","avatar_url":"https://github.com/vpusher.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003cthe-grid\\\u003e\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vpusher/the-grid)\n\n\u003e A digital frontier...\n\nGrid layout custom element based on **ES2015** and **Polymer 2.0**.\n\nFeatures:\n\n* Draggable tiles\n* Resizable tiles\n* Overlappable tiles\n* Collision detection\n* Auto growing grid size\n* Constraints on tile size\n* Mobile support\n\nExample:\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"the-grid.html\"\u003e\n    \u003cstyle\u003e\n        the-grid \u003e div {\n            background: #ff4d43;\n            opacity: 0.9;\n            color: white;\n            cursor: move;\n            overflow: hidden;\n        }\n\n        the-grid \u003e div[placeholder] {\n            background: #afafaf;\n        }\n        \n        the-grid [resize] {\n            position: absolute;\n        }\n\n        the-grid [resize=\"bottom-right\"] {\n            bottom: 0;\n            right: 0;\n            cursor: nwse-resize;\n        }\n\n        the-grid [resize=\"bottom-left\"] {\n            bottom: 0;\n            left: 0;\n            cursor: nesw-resize;\n        }\n\n        the-grid [resize=\"top-right\"] {\n            top: 0;\n            right: 0;\n            cursor: nesw-resize;\n        }\n\n        the-grid [resize=\"top-left\"] {\n            top: 0;\n            left: 0;\n            cursor: nwse-resize;\n        }\n\n        the-grid [resize=\"left\"] {\n            top: 50%;\n            left: 0;\n            cursor: ew-resize;\n            margin-top: -10px;\n        }\n\n        the-grid [resize=\"top\"] {\n            top: 0%;\n            width: 100%;\n            text-align: center;\n            cursor: ns-resize;\n        }\n\n        the-grid [resize=\"right\"] {\n            top: 50%;\n            right: 0;\n            cursor: ew-resize;\n            margin-top: -10px;\n        }\n\n        the-grid [resize=\"bottom\"] {\n            bottom: 0;\n            width: 100%;\n            text-align: center;\n            cursor: ns-resize;\n        }\n    \u003c/style\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\u003cthe-grid draggable resizable animated col-count=\"6\" row-count=\"4\" cell-margin=\"10\"\u003e\n    \u003cdiv class=\"tile\" col=\"0\" row=\"0\" height=\"1\" width=\"4\"\u003e\n        \u003cspan resize=\"right\"\u003e│\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"tile\" col=\"0\" row=\"1\" height=\"3\" width=\"1\"\u003e\n        \u003cspan resize=\"top\"\u003e─\u003c/span\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tile\" col=\"4\" row=\"3\" height=\"1\" width=\"1\"\u003e\n        \u003cspan resize=\"top-right\"\u003e┐\u003c/span\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tile\" col=\"4\" row=\"0\" height=\"2\" width=\"2\"\u003e\n        \u003cspan resize=\"bottom-left\"\u003e└\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"tile\" col=\"2\" row=\"2\" height=\"2\" width=\"2\"\u003e\n        \u003cspan resize=\"left\"\u003e│\u003c/span\u003e\n        \u003cspan resize=\"right\"\u003e│\u003c/span\u003e\n        \u003cspan resize=\"top\"\u003e─\u003c/span\u003e\n        \u003cspan resize=\"bottom\"\u003e─\u003c/span\u003e\n        \u003cspan resize=\"top-right\"\u003e┐\u003c/span\u003e\n        \u003cspan resize=\"top-left\"\u003e┌\u003c/span\u003e\n        \u003cspan resize=\"bottom-right\"\u003e┘\u003c/span\u003e\n        \u003cspan resize=\"bottom-left\"\u003e└\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv placeholder\u003e\u003c/div\u003e\n\u003c/the-grid\u003e\n```\n\n![the-grid](screenshot.gif)\n\n## Installation\n\nFirst, make sure you have [Bower](https://bower.io/) and the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed.\n\nThen,\n\n```\nbower install\npolymer serve -o\n```\n\n## Usage\n\n### The grid's container\n\nAdd a `\u003cthe-grid\u003e` element to your page:\n\n```html\n\u003cthe-grid\u003e\u003c/the-grid\u003e\n```\n\n\u003e This will show an empty static grid with the default disposition layout with no move or resize capabilities.\n\nYou can add the `draggable` or `resizable` attribute (or both) to enable respectively tile's drag'n'drop or tile's resizing.\n\n```html\n\u003cthe-grid draggable\u003e\u003c/the-grid\u003e\n```\n\n\u003e This will show an empty grid with the default disposition layout and also the ability to move tiles by drag'n'drop.\n\nLayout can be modified using the following attributes:\n\n* **cell-height**: height of the vertical unit in pixels\n* **cell-width**: width of the horizontal unit in pixels\n* **cell-margin**: inner space between tiles, both horizontally and vertically.\n* **col-count**: grid width as an amount of columns.\n* **row-count**: grid height as an amount of columns.\n\n\u003e The number of columns `col-count` and number of rows `row-count` are by default fixed, and represents the grid size. Nevertheless, you can allow the grid\n\u003e to auto increase its size with respectively `col-autogrow` and `row-autogrow` boolean attributes. This behavior occurs when a tile is resized or moved\n\u003e while being on the edge of the grid.\n\nAlso, you can allow tiles to overlap each other using `overlappable` attribute:\n\n```html\n\u003cthe-grid overlappable\u003e\u003c/the-grid\u003e\n```\n\n### The grid's children (akka tiles).\n\nEach direct child of `\u003cthe-grid\u003e` will be considered as a grid tile that can be moved or resized depending on the grid properties.\n\nGrid's children can be of any types: `\u003cdiv\u003e`, `\u003cp\u003e`, `\u003cspan\u003e`, `\u003ctile\u003e`, ... or even your own custom element: `\u003cgrid-tile\u003e`.\n\n```html\n\u003cthe-grid\u003e\n    \u003cdiv col=\"2\" row=\"1\" height=\"1\" width=\"3\" \u003e\u003c/div\u003e\n    \u003cpaper-card col=\"0\" row=\"0\" height=\"2\" width=\"2\" \u003e\u003c/paper-card\u003e\n\u003c/the-grid\u003e\n```\n\nEach child needs **4 attributes** which define its position and size within the grid:\n\n* **col**: the column index of the top-left corner of the tile (starts from 0).\n* **row**: the row index of the top-left corner of the tile (starts from 0).\n* **width**: the column spanning of the tile as an amount of columns  (~colspan).\n* **height**: the row spanning of the tile as an amount of rows (~rowspan).\n\n### The grid's placeholder\n\nIf you need some placeholder while dragging or resizing a tile for preview purpose,\nsimply add a child to `\u003cthe-grid\u003e` with the placeholder attribute.\n\n```html\n\u003cthe-grid\u003e\n    \u003cdiv placeholder style=\"color: grey\"\u003e\u003c/div\u003e\n\u003c/the-grid\u003e\n```\n\n\u003e This will enable a grey placeholder in the grid only visible while dragging and resizing tiles.\n\n### The tile's grippers (akka resizers).\n\nIf the grid has the `resizable` attribute, tiles can be resized by grabbing elements called **grippers** or **resizers**.\n\nThose elements can be of any types, they just need to have a `resize` attribute so the grid can find them.\n\n```html\n\u003cthe-grid\u003e\n    \u003cdiv col=\"2\" row=\"0\" height=\"1\" width=\"1\" \u003e\n        \u003cspan resize=\"right\"\u003e│\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/the-grid\u003e\n```\n\n\u003e Here, a tile is added to the grid. It has a nested **right** gripper so it can be used to resize the tile by the right edge. \n\nResize grippers can take the following values:\n\n* **top**: resize the tile by the top edge.\n* **bottom**: resize the tile by the bottom edge.\n* **left**: resize the tile by the left edge.\n* **right**: resize the tile by the right edge.\n* **top-left**: resize the tile by the top and left edges at the same time.\n* **top-right**: resize the tile by the top and right edges at the same time.\n* **bottom-left**: resize the tile by the bottom and left edges at the same time.\n* **bottom-right**: resize the tile by the bottom and right edges at the same time.\n\n\u003e Several grippers can be used for the same tile. They can be nested wherever in the tile element.\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## History\n\n* **1.4.0:** Now handles children added on the fly + Serialization helper.\n* **1.3.0:** Ability to add constraints on tile size as min/max width and height.\n* **1.2.0:** Introduce autogrow feature and custom events.\n* **1.1.0:** Introduce overlappable feature.\n* **1.0.3:** Ability to generate grid's children with templates.\n* **1.0.2:** Fixes shadow dom wrapping.\n* **1.0.1:** Enhanced mobile support.\n* **1.0.0:** Initial release.\n\n## License\n\nMIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvpusher%2Fthe-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvpusher%2Fthe-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvpusher%2Fthe-grid/lists"}