{"id":13432426,"url":"https://github.com/jxnblk/react-css-grid","last_synced_at":"2025-10-04T20:59:25.370Z","repository":{"id":67376007,"uuid":"64577832","full_name":"jxnblk/react-css-grid","owner":"jxnblk","description":"React layout component based on CSS Grid Layout and built with styled-components","archived":false,"fork":false,"pushed_at":"2017-09-24T19:16:16.000Z","size":271,"stargazers_count":242,"open_issues_count":5,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-08T06:42:16.123Z","etag":null,"topics":["css-grid","css-grid-layout","grid-layout","layout","react","react-component","styled-components"],"latest_commit_sha":null,"homepage":"http://jxnblk.com/react-css-grid","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/jxnblk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-31T05:04:40.000Z","updated_at":"2025-03-27T21:37:31.000Z","dependencies_parsed_at":"2023-02-23T10:45:52.740Z","dependency_job_id":null,"html_url":"https://github.com/jxnblk/react-css-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jxnblk/react-css-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freact-css-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freact-css-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freact-css-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freact-css-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jxnblk","download_url":"https://codeload.github.com/jxnblk/react-css-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jxnblk%2Freact-css-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271449019,"owners_count":24761582,"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-21T02:00:08.990Z","response_time":74,"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":["css-grid","css-grid-layout","grid-layout","layout","react","react-component","styled-components"],"created_at":"2024-07-31T02:01:11.452Z","updated_at":"2025-10-04T20:59:20.329Z","avatar_url":"https://github.com/jxnblk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# React CSS Grid\n\nReact layout component based on [CSS Grid Layout][spec] and built with [styled-components][sc]\n\n[![Build Status][travis-badge]][travis]\n[![GitHub][stars]][gh]\n\n[Demo](http://jxnblk.com/react-css-grid/docs)\n\n[travis-badge]: https://img.shields.io/travis/jxnblk/react-css-grid/master.svg?style=flat-square\n[travis]: https://travis-ci.org/jxnblk/react-css-grid\n[gh]: https://github.com/jxnblk/react-css-grid\n[stars]: https://img.shields.io/github/stars/jxnblk/react-css-grid.svg?style=social\u0026label=Star\n\n```sh\nnpm i react-css-grid\n```\n\n```jsx\n// Example usage\nimport React from 'react'\nimport Grid from 'react-css-grid'\n\nclass App extends React.Component {\n  render () {\n    return (\n      \u003cGrid\n        width={320}\n        gap={24}\u003e\n        \u003cdiv\u003eColumn\u003c/div\u003e\n        \u003cdiv\u003eColumn\u003c/div\u003e\n        \u003cdiv\u003eColumn\u003c/div\u003e\n        \u003cdiv\u003eColumn\u003c/div\u003e\n      \u003c/Grid\u003e\n    )\n  }\n}\n```\n\n\n## Features\n\n- Responsive grid layout with zero media queries\n- Simple API for handling tiled layouts\n- Customizable column width and gutters\n\n\n## Props\n\n### `width` (number or string)\n\nSets the width at which child elements will break into columns.\nPass a number for pixel values or a string for any other valid CSS length.\n\n```jsx\n\u003cGrid width={512} /\u003e\n```\n\n### `gap` (number or string)\n\nSets the gutter (`grid-gap`) between columns.\nPass a number for pixel values or a string for any other valid CSS length.\n\n```jsx\n\u003cGrid gap={16} /\u003e\n```\n\n### `align` (string)\n\nSets `align-items` to control child element alignment.\n\n\n## Browser Support\n\nSee http://caniuse.com/#feat=css-grid\n\n\n## Related\n\n- [Grid Styled](https://github.com/jxnblk/grid-styled)\n- [Styled System](https://github.com/jxnblk/styled-system)\n- [styled-components][sc]\n- [CSS Grid Layout Module][spec]\n- [CSS Grid Layout on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)\n- [Grid by Example](https://gridbyexample.com/video/series-auto-fill-auto-fit/)\n- [Spring Into CSS Grid](http://jonibologna.com/spring-into-css-grid/)\n\n\n[spec]: https://www.w3.org/TR/css-grid-1/\n[demo]: http://jxnblk.com/react-css-grid/\n[sc]: https://styled-components.com\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Freact-css-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjxnblk%2Freact-css-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjxnblk%2Freact-css-grid/lists"}