{"id":13492944,"url":"https://github.com/josephrexme/griz","last_synced_at":"2025-07-09T20:34:22.516Z","repository":{"id":57254328,"uuid":"97094341","full_name":"josephrexme/griz","owner":"josephrexme","description":"Grid library for React; Rescue the cat","archived":false,"fork":false,"pushed_at":"2018-08-16T18:58:10.000Z","size":389,"stargazers_count":103,"open_issues_count":0,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-05T11:31:32.614Z","etag":null,"topics":["flexbox","grid","grid-system","react","styled-components"],"latest_commit_sha":null,"homepage":"https://josephrexme.github.io/griz/","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/josephrexme.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}},"created_at":"2017-07-13T07:39:44.000Z","updated_at":"2024-06-11T15:25:09.000Z","dependencies_parsed_at":"2022-08-31T08:21:36.297Z","dependency_job_id":null,"html_url":"https://github.com/josephrexme/griz","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/josephrexme/griz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephrexme%2Fgriz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephrexme%2Fgriz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephrexme%2Fgriz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephrexme%2Fgriz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josephrexme","download_url":"https://codeload.github.com/josephrexme/griz/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josephrexme%2Fgriz/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260930942,"owners_count":23084769,"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":["flexbox","grid","grid-system","react","styled-components"],"created_at":"2024-07-31T19:01:10.645Z","updated_at":"2025-07-09T20:34:22.492Z","avatar_url":"https://github.com/josephrexme.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Griz\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![Griz](https://cdn.rawgit.com/josephrexme/griz/66796439/griz.png)\n\n\u003c/div\u003e\n\nA grid system for React applications based on flexbox and [styled-components](https://www.styled-components.com). See the [demo](https://josephrexme.github.io/griz/). Griz uses [styled-components](https://www.styled-components.com). But there's also a [Sass/CSS version](https://gist.github.com/josephrexme/e71e5502b09b5421084f32dcdce8247a).\n\n### Installation\n\n```sh\nnpm install griz\n```\n\n### Usage\n```jsx\nimport {Grid, GridCol} from 'griz';\n\nconst App = () =\u003e (\n  \u003cGrid\u003e\n    \u003cGridCol\u003eI take up 50%\u003c/GridCol\u003e\n    \u003cGridCol\u003eMe too!\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n);\n```\n`\u003cGrid\u003e` defines a row and `\u003cGridCol\u003e` defines the columns. The number of `\u003cGridCol\u003e` placed in a `\u003cGrid\u003e` will automatically take up the space required without any specification. But you can also [specify columns](#columns).\n\n#### Responsiveness\n```jsx\nconst App = () =\u003e (\n  \u003cGrid responsiveSm\u003e\n    \u003cGridCol\u003eI'm your half\u003c/GridCol\u003e\n    \u003cGridCol\u003eYou're my half\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n  \u003cGrid responsiveMd\u003e\n    \u003cGridCol\u003eI am Rick\u003c/GridCol\u003e\n    \u003cGridCol\u003eI am Morty\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n  \u003cGrid responsiveLg\u003e\n    \u003cGridCol\u003eI am Batman\u003c/GridCol\u003e\n    \u003cGridCol\u003eI am uh... uh... uh.. Batman\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n);\n```\n\n#### Gutters\nCustom widths can be set to override the default 10px gutter width\n```jsx\nconst App = () =\u003e (\n  \u003cGrid gutterWidth=\"20\"\u003e\n    \u003cGridCol\u003eSo close Jack\u003c/GridCol\u003e\n    \u003cGridCol\u003eSo close Rose\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n);\n```\nYou could set custom width to 0 for a gutterless grid or you can simply use gutterless.\n```jsx\nconst App = () =\u003e (\n  \u003cGrid gutterless\u003e\n    \u003cGridCol\u003eSo close Jack\u003c/GridCol\u003e\n    \u003cGridCol\u003eSo close Rose\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n);\n```\n\n#### Columns\nThink of the total as a 100 and throw in any value that you divide for any ratio you want. Could be 50:50 for a 2 equal sized grid, 60:40, and so on.\n```jsx\nconst App = () =\u003e (\n  \u003cGrid\u003e\n    \u003cGridCol column=\"60\"\u003e\u003c/GridCol\u003e\n    \u003cGridCol column=\"40\"\u003e\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n);\n```\n\n#### Offsets\n```jsx\nconst App = () =\u003e (\n  \u003cGrid\u003e\n    \u003cGridCol offset=\"25\"\u003e\u003c/GridCol\u003e\n  \u003c/Grid\u003e\n);\n```\nFor more column and offset values at work, see the [demo](https://josephrexme.github.io/griz/).\n\n#### Wrapping columns\nWhen column value is not defined you get the benefit of automatically fitting in the columns on one line of the row. If you need wrapping columns you'll have to specify a column value. A common case for this is when iterating items programmatically.\n\n### License\nLicensed under MIT License, Copyright © Joseph Rex\n\nSee [LICENSE](https://github.com/josephrexme/griz/blob/master/LICENSE) for more information.\n\n### Acknowledgements\nOriginal idea by [Phillip Walton](http://philipwalton.github.io/solved-by-flexbox/demos/grids/)\u003cbr\u003e\nMuch thanks to [ionic framework](http://ionicframework.com/docs/components/#grid) for building on that\u003cbr\u003e\nAnd this wouldn't be possible without [styled-components](https://www.styled-components.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephrexme%2Fgriz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosephrexme%2Fgriz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosephrexme%2Fgriz/lists"}