{"id":17275098,"url":"https://github.com/daun/detect-grid","last_synced_at":"2025-04-14T08:41:15.993Z","repository":{"id":132810641,"uuid":"284522219","full_name":"daun/detect-grid","owner":"daun","description":"Detect and mark grid cells for easy styling","archived":false,"fork":false,"pushed_at":"2024-07-08T10:48:50.000Z","size":48,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T14:06:19.414Z","etag":null,"topics":["css","grid","js","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/daun.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":"2020-08-02T18:52:53.000Z","updated_at":"2024-12-19T00:21:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d9f88d6-2cc0-45d0-98c7-f15ea4cdef45","html_url":"https://github.com/daun/detect-grid","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fdetect-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fdetect-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fdetect-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daun%2Fdetect-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daun","download_url":"https://codeload.github.com/daun/detect-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248848763,"owners_count":21171437,"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":["css","grid","js","layout"],"created_at":"2024-10-15T08:55:25.680Z","updated_at":"2025-04-14T08:41:15.956Z","avatar_url":"https://github.com/daun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Detect Grid\n\n[![NPM version](https://img.shields.io/npm/v/detect-grid)](https://www.npmjs.com/package/detect-grid)\n[![Bundle size](https://img.shields.io/bundlephobia/minzip/detect-grid?label=size)](https://bundlephobia.com/result?p=detect-grid)\n[![GitHub license](https://img.shields.io/github/license/daun/detect-grid)](./LICENSE)\n\nDetect and mark grid cells for easy styling.\n\n## What does it do?\n\nThis package detects the rows and columns of a layout visually by comparing the\noffset from the top-left edge of the parent container. Each element is assigned\na row and column index.\n\nIt will mark each detected cell with data attributes for easy targeting in CSS.\nThis makes styling cells by index feasible even in flexbox or grid layouts where\nvisual position doesn't always follow source order.\n\n## Installation\n\n```bash\nnpm install detect-grid\n```\n\n## Usage\n\n### Detect grid cells\n\nReturns an array of rows and columns for further processing. Indices are zero-based.\n\n```js\nimport detectGrid from 'detect-grid'\n\nconst grid = document.querySelector('.grid')\n\nconst rows = detectGrid(grid)\n\nrows.forEach((cols, rowIndex) =\u003e {\n  cols.forEach((cell, colIndex) =\u003e {\n    console.log(`Cell at row ${rowIndex} and col ${colIndex}`, cell.textContent)\n  })\n})\n```\n\n### Mark grid cells\n\nDetects rows and columns and mark them with data attributes for CSS styling.\n\n```js\nimport { markGrid } from 'detect-grid'\n\nconst grid = document.querySelector('.grid')\n\nmarkGrid(grid, { selector: '.cell' })\n```\n\n**Before**\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**After**\n\n\u003e :warning: While the `detectGrid` function returns zero-based arrays, the data\n   attributes added by `markGrid` start counting from `1` to keep compatibility\n   with CSS nth-child selectors.\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\" data-nth-row=\"1\" data-nth-col=\"1\" data-first-row data-first-col\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" data-nth-row=\"1\" data-nth-col=\"2\" data-first-row data-last-col\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\" data-nth-row=\"2\" data-nth-col=\"1\" data-first-col\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" data-nth-row=\"2\" data-nth-col=\"2\" data-last-col\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\" data-nth-row=\"2\" data-nth-col=\"1\" data-last-row data-first-col\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" data-nth-row=\"2\" data-nth-col=\"2\" data-last-row data-last-col\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### CSS variables\n\nSome visual effects like gradients require CSS custom properties for calculating\nthe correct value for each row and cell. You can enable those behind an optional\nfeature flag when marking grid cells:\n\n```js\nmarkGrid(grid, { cssVariables: true })\n```\n\nYou can now use the following CSS properties like `--col-fraction` or `--row-fraction`\nfor calculating styles:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\" style=\"--col-index: 0; --col-count: 3; --col-fraction: 0; --row-index: 0; --row-count: 2; --row-fraction: 0;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" style=\"--col-index: 1; --col-count: 3; --col-fraction: 0.5; --row-index: 0; --row-count: 2; --row-fraction: 0;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" style=\"--col-index: 2; --col-count: 3; --col-fraction: 1; --row-index: 0; --row-count: 2; --row-fraction: 0;\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cdiv class=\"cell\" style=\"--col-index: 0; --col-count: 3; --col-fraction: 0; --row-index: 1; --row-count: 2; --row-fraction: 1;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" style=\"--col-index: 1; --col-count: 3; --col-fraction: 0.5; --row-index: 1; --row-count: 2; --row-fraction: 1;\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell\" style=\"--col-index: 2; --col-count: 3; --col-fraction: 1; --row-index: 1; --row-count: 2; --row-fraction: 1;\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Options\n\nConfigure how cells are detected by passing an options object as second parameter.\n\n```js\nconst rows = detectGrid(grid, {\n  selector: '.cell',\n  align: 'bottom'\n})\n```\n\n|Option|Description|Type/Options|Default|\n|---|---|---|---|\n|`selector`|DOM selector to find grid cells|Selector string|Use direct childnodes|\n|`justify`|Horizontal alignment of measuring point|String: `left`, `center`, `right`|`left`|\n|`align`|Vertical alignment of measuring point|String: `top`, `center`, `bottom`|`top`|\n|`tolerance`|Tolerance to group rows/columns by|Number (px)|`0`|\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaun%2Fdetect-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaun%2Fdetect-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaun%2Fdetect-grid/lists"}