{"id":19865145,"url":"https://github.com/glweems/css-grid-template-parser","last_synced_at":"2026-05-10T14:01:01.505Z","repository":{"id":97290761,"uuid":"299291248","full_name":"glweems/css-grid-template-parser","owner":"glweems","description":"CSS Grid Template Parser","archived":false,"fork":false,"pushed_at":"2020-09-28T18:24:18.000Z","size":631,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T15:39:23.823Z","etag":null,"topics":["css-grid","grid","parser","template"],"latest_commit_sha":null,"homepage":"https://glweems.github.io/css-grid-template-parser/","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/glweems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2020-09-28T11:47:12.000Z","updated_at":"2022-12-26T11:43:21.000Z","dependencies_parsed_at":"2023-06-26T09:00:13.488Z","dependency_job_id":null,"html_url":"https://github.com/glweems/css-grid-template-parser","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/glweems%2Fcss-grid-template-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fcss-grid-template-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fcss-grid-template-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glweems%2Fcss-grid-template-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glweems","download_url":"https://codeload.github.com/glweems/css-grid-template-parser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241274346,"owners_count":19937168,"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","grid","parser","template"],"created_at":"2024-11-12T15:21:19.659Z","updated_at":"2026-05-10T14:01:01.385Z","avatar_url":"https://github.com/glweems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-grid-template-parser\n\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Greenkeeper badge](https://badges.greenkeeper.io/glweems/css-grid-template-parser.svg)](https://greenkeeper.io/)\n[![Travis](https://img.shields.io/travis/glweems/css-grid-template-parser.svg)](https://travis-ci.org/glweems/css-grid-template-parser)\n[![Coveralls](https://img.shields.io/coveralls/glweems/css-grid-template-parser.svg)](https://coveralls.io/github/glweems/css-grid-template-parser)\n\nA simple CSS Grid template parser\n\n## Installation\n\n```\nnpm install --save css-grid-template-parser\n```\n\n## Basic usage\n\n### Parse a grid template\n\n```js\nimport { grid } from 'css-grid-template-parser';\n\nconst areas = grid(`\n  \"a a a b b\"\n  \"a a a b b\"\n  \". . c c c\"\n  \"d d d d d\"\n`);\n\n// → {\n//   width: 5,\n//   height: 4,\n//   areas: {\n//     a: {\n//       column: {start: 1, end: 4, span: 3},\n//       row: {start: 1, end: 3, span: 2},\n//     },\n//     b: {\n//       column: {start: 4, end: 6, span: 2},\n//       row: {start: 1, end: 3, span: 2},\n//     },\n//     c: {\n//       column: {start: 3, end: 6, span: 3},\n//       row: {start: 3, end: 4, span: 1},\n//     },\n//     d: {\n//       column: {start: 1, end: 6, span: 5},\n//       row: {start: 4, end: 5, span: 1},\n//     },\n//   },\n// }\n```\n\n### Build a grid template\n\n```js\nimport { template } from 'css-grid-template-parser';\n\nconst areas = template({\n  width: 5,\n  height: 4,\n  areas: {\n    a: {\n      column: { start: 1, end: 4, span: 3 },\n      row: { start: 1, end: 3, span: 2 },\n    },\n    b: {\n      column: { start: 3, end: 6, span: 3 },\n      row: { start: 3, end: 5, span: 2 },\n    },\n  },\n});\n\n// → `\"a a a . .\"\n//    \"a a a . .\"\n//    \". . b b b\"\n//    \". . b b b\"`\n```\n\nAn helper is provided to declare areas more intuitively. The following example is equivalent to the previous:\n\n```js\nimport { template, area } from 'css-grid-template-parser';\n\nconst a = area({\n  x: 0,\n  y: 0,\n  width: 3,\n  height: 2,\n});\n\nconst b = area({\n  x: 2,\n  y: 2,\n  width: 3,\n  height: 2,\n});\n\nconst areas = template({\n  width: 5,\n  height: 4,\n  areas: { a, b },\n});\n\n// → `\"a a a . .\"\n//    \"a a a . .\"\n//    \". . b b b\"\n//    \". . b b b\"`\n```\n\n## API\n\n### `grid(template)`\n\nParses a grid template and returns an object representation.\n\n#### Arguments\n\n1. `template` _string_ The grid template to parse.\n\n#### Returns\n\n_[Grid](#grid)_ An object representation of the grid template.\n\n#### Example\n\n```js\nimport { grid } from 'css-grid-template-parser';\n\nconst areas = grid(`\n  \"a a a b b\"\n  \"a a a b b\"\n  \". . c c c\"\n  \"d d d d d\"\n`);\n\n// → {\n//   width: 5,\n//   height: 4,\n//   areas: {\n//     a: {\n//       column: {start: 1, end: 4, span: 3},\n//       row: {start: 1, end: 3, span: 2},\n//     },\n//     b: {\n//       column: {start: 4, end: 6, span: 2},\n//       row: {start: 1, end: 3, span: 2},\n//     },\n//     c: {\n//       column: {start: 3, end: 6, span: 3},\n//       row: {start: 3, end: 4, span: 1},\n//     },\n//     d: {\n//       column: {start: 1, end: 6, span: 5},\n//       row: {start: 4, end: 5, span: 1},\n//     },\n//   },\n// }\n```\n\n---\n\n### `template(grid)`\n\nBuilds a grid template from an object representation.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to build.\n\n#### Returns\n\n_string_ The equivalent grid template.\n\n#### Example\n\n```js\nimport { template } from 'css-grid-template-parser';\n\nconst areas = template({\n  width: 5,\n  height: 4,\n  areas: {\n    a: {\n      column: { start: 1, end: 4, span: 3 },\n      row: { start: 1, end: 3, span: 2 },\n    },\n    b: {\n      column: { start: 3, end: 6, span: 3 },\n      row: { start: 3, end: 5, span: 2 },\n    },\n  },\n});\n\n// → `\"a a a . .\"\n//    \"a a a . .\"\n//    \". . b b b\"\n//    \". . b b b\"`\n```\n\n---\n\n### `rect(area)`\n\nConverts an area into a rect.\n\n#### Arguments\n\n1. `area` _[Area](#area)_ The area to convert.\n\n#### Returns\n\n_[Rect](#rect)_ The equivalent rect.\n\n#### Example\n\n```js\nimport { rect } from 'css-grid-template-parser';\n\nconst r = rect({\n  column: { start: 1, end: 4, span: 3 },\n  row: { start: 1, end: 3, span: 2 },\n});\n\n// → {\n//     x: 0,\n//     y: 0,\n//     width: 3,\n//     height: 2,\n//   }\n```\n\n---\n\n### `area(rect)`\n\nConverts a rect into an area.\n\n#### Arguments\n\n1. `rect` _[Rect](#rect)_ The rect to convert.\n\n#### Returns\n\n_[Area](#area)_ The equivalent area.\n\n#### Example\n\n```js\nimport { area } from 'css-grid-template-parser';\n\nconst a = area({\n  x: 0,\n  y: 0,\n  width: 3,\n  height: 2,\n});\n\n// → {\n//     column: {start: 1, end: 4, span: 3},\n//     row: {start: 1, end: 3, span: 2},\n//   }\n```\n\n---\n\n### `minColumnStart(grid)`\n\nFinds the min column start of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The min column start.\n\n#### Example\n\n```js\nimport { grid, minColumnStart } from 'css-grid-template-parser';\n\nconst min = minColumnStart(\n  grid(`\n  \". . a a a\"\n  \". b b b b\"\n  \". . . c c\"\n`)\n);\n\n// → 2\n```\n\n---\n\n### `maxColumnStart(grid)`\n\nFinds the max column start of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The max column start.\n\n#### Example\n\n```js\nimport { grid, maxColumnStart } from 'css-grid-template-parser';\n\nconst max = maxColumnStart(\n  grid(`\n  \". . a a a\"\n  \". b b b b\"\n  \". . . c c\"\n`)\n);\n\n// → 4\n```\n\n---\n\n### `minColumnEnd(grid)`\n\nFinds the min column end of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The min column end.\n\n#### Example\n\n```js\nimport { grid, minColumnEnd } from 'css-grid-template-parser';\n\nconst min = minColumnEnd(\n  grid(`\n  \"a a . . .\"\n  \"b b b b .\"\n  \"c c c . .\"\n`)\n);\n\n// → 3\n```\n\n---\n\n### `maxColumnEnd(grid)`\n\nFinds the max column end of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The max column end.\n\n#### Example\n\n```js\nimport { grid, maxColumnEnd } from 'css-grid-template-parser';\n\nconst max = maxColumnEnd(\n  grid(`\n  \"a a . . .\"\n  \"b b b b .\"\n  \"c c c . .\"\n`)\n);\n\n// → 5\n```\n\n---\n\n### `minRowStart(grid)`\n\nFinds the min row start of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The min row start.\n\n#### Example\n\n```js\nimport { grid, minRowStart } from 'css-grid-template-parser';\n\nconst min = minRowStart(\n  grid(`\n  \". . . .\"\n  \"a a . .\"\n  \"a a b b\"\n  \"a a b b\"\n`)\n);\n\n// → 2\n```\n\n---\n\n### `maxRowStart(grid)`\n\nFinds the max row start of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The max row start.\n\n#### Example\n\n```js\nimport { grid, maxRowStart } from 'css-grid-template-parser';\n\nconst max = maxRowStart(\n  grid(`\n  \". . . .\"\n  \"a a . .\"\n  \"a a b b\"\n  \"a a b b\"\n`)\n);\n\n// → 3\n```\n\n---\n\n### `minRowEnd(grid)`\n\nFinds the min row end of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The min row end.\n\n#### Example\n\n```js\nimport { grid, minRowEnd } from 'css-grid-template-parser';\n\nconst min = minRowEnd(\n  grid(`\n  \"a a b b\"\n  \"a a b b\"\n  \". . b b\"\n  \". . . .\"\n`)\n);\n\n// → 3\n```\n\n---\n\n### `maxRowEnd(grid)`\n\nFinds the max row end of all grid areas.\n\n#### Arguments\n\n1. `grid` _[Grid](#grid)_ The grid to analyze.\n\n#### Returns\n\n_number_ The max row end.\n\n#### Example\n\n```js\nimport { grid, maxRowEnd } from 'css-grid-template-parser';\n\nconst max = maxRowEnd(\n  grid(`\n  \"a a b b\"\n  \"a a b b\"\n  \". . b b\"\n  \". . . .\"\n`)\n);\n\n// → 4\n```\n\n## Types\n\n### `Track`\n\n```ts\nexport interface Track {\n  start: number;\n  end: number;\n  span: number;\n}\n```\n\n### `Area`\n\n```ts\ntype Area = {\n  row: Track;\n  column: Track;\n};\n```\n\n### `Rect`\n\n```ts\nexport interface Rect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n```\n\n### `Grid`\n\n```ts\nexport interface Grid {\n  width: number;\n  height: number;\n  areas: Record\u003cstring, Area\u003e;\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglweems%2Fcss-grid-template-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglweems%2Fcss-grid-template-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglweems%2Fcss-grid-template-parser/lists"}