{"id":16278723,"url":"https://github.com/pixelass/next-grid-workshop","last_synced_at":"2025-08-03T13:05:55.927Z","repository":{"id":48043239,"uuid":"394530793","full_name":"pixelass/next-grid-workshop","owner":"pixelass","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-12T06:12:46.000Z","size":90,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T08:51:26.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelass.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":"2021-08-10T05:03:40.000Z","updated_at":"2021-08-12T06:12:49.000Z","dependencies_parsed_at":"2022-08-12T17:20:51.169Z","dependency_job_id":null,"html_url":"https://github.com/pixelass/next-grid-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pixelass/next-grid-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fnext-grid-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fnext-grid-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fnext-grid-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fnext-grid-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelass","download_url":"https://codeload.github.com/pixelass/next-grid-workshop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Fnext-grid-workshop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268548029,"owners_count":24267771,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-10T18:59:42.423Z","updated_at":"2025-08-03T13:05:55.866Z","avatar_url":"https://github.com/pixelass.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grid Workshop\n\nThis repository was created for a small workshop covering layout grids.\n\nThis Grid was developed by [Gregor Adams](https://github.com/pixelass). It uses the power of\nCSS-variables (a.k.a custom css properties).\n\n\u003c!-- toc --\u003e\n\n- [Getting Started](#getting-started)\n- [Variants](#variants)\n  * [Flex](#flex)\n  * [Grid](#grid)\n- [KISS Nesting](#kiss-nesting)\n- [Mobile First](#mobile-first)\n- [Advanced](#advanced)\n  * [On a grid](#on-a-grid)\n  * [On a row](#on-a-row)\n\n\u003c!-- tocstop --\u003e\n\n## Getting Started\n\n1. Clone this repository\n\n```shell\ngit clone git@github.com:pixelass/next-grid-workshop.git\n```\n\n2. cd into the folder\n\n```\ncd next-grid-workshop\n```\n\n3. Install the dependencies\n\n```\nyarn install\n\n## or with npm\nnpm install\n```\n\n4. Start the dev server\n\n```\nyarn run dev\n\n## or with npm\nnpm run dev\n```\n\nThe page for the workshop is available at http://localhost:3000/workshop. Its source can be found\nin [src/pages/workshop.tsx](src/pages/workshop.tsx).\n\nAdditional documentation can be found in [docs](docs).\n\nIf you have questions, just\n[open an issue](https://github.com/pixelass/next-grid-workshop/issues/new) and ask. Feel free to\nformulate it in german or english. Answers will be given in the language of the question.\n\n## Variants\n\nThere are two variants: `display: flex;`, `display: grid;`, each offering unique features.\n\n### Flex\n\n* Allows splitting columns\n\n```tsx\n\u003cFlexGrid\u003e\n  \u003cFlexColumn colSpanS=\"calc(var(--col-count) / 2)\"\u003eAlways half\u003c/FlexColumn\u003e\n\u003c/FlexGrid\u003e\n```\n\n\n### Grid\n\n* Allows pushing columns\n\n```tsx\n\u003cGridGrid\u003e\n  \u003cGridColumn colSpanL={2} colStartL={3}\u003e2 columns wide starts at column 3\u003c/GridColumn\u003e\n\u003c/GridGrid\u003e\n```\n\n## KISS Nesting\n\nYou might have used grids that always have 12 columns if you nest them in each other. This grid\ninherits the column count from its parent, making it very intuitive to define a desired column span.\n\n```tsx\n\u003cColumn colSpanS={4}\u003e\n  4 columns\n  \u003cRow\u003e\n    \u003cColumn colSpanS={4}\u003e4 columns\u003c/Column\u003e\n    \u003cColumn colSpanS={4}\u003e\n      4 columns\n      \u003cRow\u003e\n        \u003cColumn colSpanS={4}\u003e4 columns\u003c/Column\u003e\n      \u003c/Row\u003e\n    \u003c/Column\u003e\n  \u003c/Row\u003e\n\u003c/Column\u003e\n```\n\n## Mobile First\n\nThis is a mobile-first grid, that collapsed columns depending on the viewport.\n\n```\nXS\n┏━┳━┓\n┃ ┃ ┃\n┃ ┃ ┃\n┃ ┃ ┃\n┗━┻━┛\nS\n┏━┳━┳━┳━┓\n┃ ┃ ┃ ┃ ┃\n┃ ┃ ┃ ┃ ┃\n┃ ┃ ┃ ┃ ┃\n┗━┻━┻━┻━┛\nM\n┏━┳━┳━┳━┳━┳━┳━┳━┓\n┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃\n┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃\n┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃\n┗━┻━┻━┻━┻━┻━┻━┻━┛\nL\n┏━┳━┳━┳━┳━┳━┳━┳━┳━┳━┳━┓\n┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃\n┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃\n┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃\n┗━┻━┻━┻━┻━┻━┻━┻━┻━┻━┻━┛\n```\n\n## Advanced\n\nIf you need to break the grid logic you can define a compound grid which has its own logic.\nThis works for `flex` and `grid` variants.\n\n### On a grid\n```tsx\n\u003cGrid colCountL={15}\u003e\n  \u003cColumn colSpanL={4}\u003e 4 of 15\u003c/Column\u003e\n\u003c/Grid\u003e\n```\n### On a row\n```tsx\n\u003cColumn\u003e\n  \u003cRow colCountL={15}\u003e\n    \u003cColumn colSpanL={4}\u003e 4 of 15\u003c/Column\u003e\n  \u003c/Row\u003e\n\u003c/Column\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelass%2Fnext-grid-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelass%2Fnext-grid-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelass%2Fnext-grid-workshop/lists"}