{"id":13630618,"url":"https://github.com/azz/styled-css-grid","last_synced_at":"2025-04-11T19:14:11.836Z","repository":{"id":23237490,"uuid":"98502243","full_name":"azz/styled-css-grid","owner":"azz","description":"🍱 A tiny CSS grid layout for React","archived":false,"fork":false,"pushed_at":"2024-08-07T02:54:45.000Z","size":489,"stargazers_count":623,"open_issues_count":13,"forks_count":41,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-03T21:11:10.533Z","etag":null,"topics":["css","grid","react","styled-components"],"latest_commit_sha":null,"homepage":"https://styled-css-grid.js.org/","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/azz.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":"2017-07-27T06:38:24.000Z","updated_at":"2025-03-05T17:12:33.000Z","dependencies_parsed_at":"2024-11-28T03:00:28.904Z","dependency_job_id":"1ffbbafa-8cdf-42eb-9262-d9ebb26d1875","html_url":"https://github.com/azz/styled-css-grid","commit_stats":{"total_commits":63,"total_committers":16,"mean_commits":3.9375,"dds":"0.31746031746031744","last_synced_commit":"991dcc45d8374b6fc839a4436469010aacb2f895"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azz%2Fstyled-css-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azz%2Fstyled-css-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azz%2Fstyled-css-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azz%2Fstyled-css-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azz","download_url":"https://codeload.github.com/azz/styled-css-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247717596,"owners_count":20984446,"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","react","styled-components"],"created_at":"2024-08-01T22:01:50.315Z","updated_at":"2025-04-11T19:14:11.807Z","avatar_url":"https://github.com/azz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# `styled-css-grid 🍱`\n\n[![Travis](https://img.shields.io/travis/azz/styled-css-grid.svg?style=flat-square)](https://travis-ci.org/azz/styled-css-grid)\n[![Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![npm](https://img.shields.io/npm/v/styled-css-grid.svg?style=flat-square)](https://npmjs.org/styled-css-grid)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)\n[![JS.ORG](https://img.shields.io/badge/js.org-dns-ffb400.svg?style=flat-square)](http://js.org)\n\n\u003e A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.\n\n## examples\n\nSee the **[website]**.\n\n## installation\n\nInstall React and [styled-components], then:\n\n```bash\n$ yarn add styled-css-grid\n```\n\n## usage\n\n```jsx\nimport React from \"react\";\nimport { Grid, Cell } from \"styled-css-grid\";\n\nconst MyGrid = () =\u003e (\n  \u003cGrid columns={2} gap=\"2px\"\u003e\n    \u003cCell\u003efoo\u003c/Cell\u003e\n    \u003cCell height={2}\u003ebar\u003c/Cell\u003e\n    \u003cCell width={2}\u003ebaz\u003c/Cell\u003e\n  \u003c/Grid\u003e\n);\n```\n\n## api\n\n### `Grid`\n\nWrap your cells in `Grid`. Pretty simple.\n\nProps:\n\n* `columns`: The [grid-template-columns] CSS property. When a number is passed\n  it is a shorthand to specify the number of columns. Default is `12`.\n* `gap`: The [grid-gap] CSS property. Default is `\"8px\"`.\n* `columnGap`: The [column-gap] CSS property. Not provided by default.\n* `rowGap`: The [row-gap] CSS property. Not provided by default.\n* `minRowHeight`: Minimum height of each row. Default is `\"20px\"`.\n* `height`: The [height] CSS property. Default is `\"auto\"`.\n* `flow`: The [grid-auto-flow] CSS property. Default is `\"row\"`.\n* `rows`: The [grid-template-rows] CSS property. When a number is passed\n  it is a shorthand to specify the number of rows. Not provided by default.\n* `areas`: The [grid-template-areas] CSS property. Pass an array of strings, e.g. `[\"a a\", \"b c\"]`. Not provided by default.\n* `justifyContent`: The [justify-content] CSS property. Not provided by default.\n* `alignContent`: The [align-content] CSS property. Not provided by default.\n\n### `Cell`\n\nA cell. Not too much to say...\n\nProps:\n\n* `width`: Cell width in units, default is `1`.\n* `height`: Cell height in units, default is `1`.\n* `left`: The [grid-column-start] CSS property. Not provided by default.\n* `top`: The [grid-row-start] CSS property. Not provided by default.\n* `middle`: Vertically align the contents of the cell. Default is `false`.\n* `center`: Horizontally align the text contents of the cell. Default is `false`.\n* `area`: The [grid-area] CSS property. Not provided by default.\n\n## browser support\n\n_[caniuse]_\n\nYou can use CSS grid in production _today_ **if** you don't need to support IE and Edge, or you're building tooling or internal sites where you only need to support one browser.\n\nYou can use CSS grid _soon_ if you have to support the latest version of modern browsers. Edge 16 will implement the latest CSS grid spec.\n\n![Can I use?](website/caniuse.png)\n\n[website]: https://styled-css-grid.js.org/\n[CSS grid]: https://mdn.io/CSS_Grid_Layout\n[styled-components]: https://github.com/styled-components/styled-components\n[grid-auto-flow]: https://mdn.io/grid-auto-flow\n[grid-row-start]: https://mdn.io/grid-row-start\n[grid-column-start]: https://mdn.io/grid-column-start\n[grid-template-columns]: https://mdn.io/grid-template-columns\n[grid-template-rows]: https://mdn.io/grid-template-rows\n[grid-template-areas]: https://mdn.io/grid-template-areas\n[grid-area]: https://mdn.io/grid-area\n[height]: https://mdn.io/css-height\n[grid-gap]: https://mdn.io/grid-gap\n[column-gap]: https://mdn.io/column-gap\n[row-gap]: https://mdn.io/row-gap\n[justify-content]: https://mdn.io/justify-content\n[align-content]: https://mdn.io/align-content\n[caniuse]: http://caniuse.com/#feat=css-grid\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazz%2Fstyled-css-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazz%2Fstyled-css-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazz%2Fstyled-css-grid/lists"}