{"id":15020303,"url":"https://github.com/loicmahieu/react-styled-flexboxgrid","last_synced_at":"2025-05-15T14:07:27.424Z","repository":{"id":16417824,"uuid":"79905342","full_name":"LoicMahieu/react-styled-flexboxgrid","owner":"LoicMahieu","description":"Grid system based on styled-components and flexbox for React","archived":false,"fork":false,"pushed_at":"2024-04-02T14:11:05.000Z","size":3761,"stargazers_count":558,"open_issues_count":48,"forks_count":68,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-29T17:38:36.258Z","etag":null,"topics":["flexbox","grid","react","styled-components"],"latest_commit_sha":null,"homepage":"https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html","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/LoicMahieu.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-24T11:26:07.000Z","updated_at":"2024-10-17T16:26:15.000Z","dependencies_parsed_at":"2024-06-18T12:35:02.122Z","dependency_job_id":"60442ea5-3f47-43b6-87de-f983a4b54c0f","html_url":"https://github.com/LoicMahieu/react-styled-flexboxgrid","commit_stats":{"total_commits":169,"total_committers":15,"mean_commits":"11.266666666666667","dds":0.3431952662721893,"last_synced_commit":"eeb75fccd534234a77092b0a7d19c67f40c92872"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoicMahieu%2Freact-styled-flexboxgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoicMahieu%2Freact-styled-flexboxgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoicMahieu%2Freact-styled-flexboxgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoicMahieu%2Freact-styled-flexboxgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LoicMahieu","download_url":"https://codeload.github.com/LoicMahieu/react-styled-flexboxgrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704569,"owners_count":20982298,"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","react","styled-components"],"created_at":"2024-09-24T19:54:53.075Z","updated_at":"2025-04-07T18:10:18.613Z","avatar_url":"https://github.com/LoicMahieu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-styled-flexboxgrid\n\n[![npm version](https://badge.fury.io/js/react-styled-flexboxgrid.svg)](https://badge.fury.io/js/react-styled-flexboxgrid)\n[![Build Status](https://travis-ci.org/LoicMahieu/react-styled-flexboxgrid.svg?branch=master)](https://travis-ci.org/LoicMahieu/react-styled-flexboxgrid)\n[![NPM Status](http://img.shields.io/npm/dm/react-styled-flexboxgrid.svg?style=flat-square)](https://www.npmjs.org/package/react-styled-flexboxgrid)\n[![js-standard-style](https://img.shields.io/badge/lint-standard-green.svg)](http://standardjs.com)\n\n\nSet of React components that implement [`flexboxgrid.css`](https://github.com/kristoferjoseph/flexboxgrid) but with [`styled-components`](https://github.com/styled-components/styled-components)/[`emotion`](https://github.com/emotion-js/emotion). Furthermore, it allows to customize grid configuration like gutter width...\n\nHighly inspired by the excellent [`react-flexbox-grid`](https://github.com/roylee0704/react-flexbox-grid) which the API is nearly the same than this module.\n\n[**Demo**](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html)\n\n## Usage\n\n### Installation\n\n```\nnpm i -S react-styled-flexboxgrid\n```\n\n`react-styled-flexboxgrid` depends on 2 **peer** dependencies:\n- `react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0`\n- `prop-types@^15.0.0-0`\n- `styled-components@2`\n\nYou should install them in your project.\n\n### Basic\n\n```JSX\nimport React from 'react'\n\nimport {Grid, Col, Row} from 'react-styled-flexboxgrid'\n\nconst App = props =\u003e\n  \u003cGrid\u003e\n    \u003cRow\u003e\n      \u003cCol xs={6} md={3}\u003eHello, world!\u003c/Col\u003e\n    \u003c/Row\u003e\n  \u003c/Grid\u003e\n```\n\n### Grid\n\nThe `\u003cGrid\u003e` component is optional and can help to wrap children in a fixed/fluid container. Use the configuration `container` for fixed width value.\n\n##### Props\n\n- `fluid` _(Boolean)_: Create a responsive fixed width container or a full width container, spanning the entire width of your viewport. Default: false\n\n\n### Row\n\n##### Props\n\n- `reverse` _(Boolean)_: Use `flex-direction: row-reverse`. Default: false\n- `start`\n- `center`\n- `end`\n- `top`\n- `middle`\n- `bottom`\n- `around`\n- `between`\n- `first`\n- `last` _(String(xs|sm|md|lg)_: Align elements to the start or end of row as well as the top, bottom, or center of a column.\n\n\n### Col\n\n##### Props\n\n- `reverse` _(Boolean)_: Use `flex-direction: column-reverse`. Default: false\n- `xs`\n- `sm`\n- `md`\n- `lg` _(Boolean|Integer)_:\n  * When `true`, enable auto sizing column.\n  * When `false`, hide colomn for the breakpoint.\n  * When `integer` value, it specify the column size on the grid. (1 to 12)\n- `xsOffset`\n- `smOffset`\n- `mdOffset`\n- `lgOffset` _(Integer)_: Offset the column.\n\n\n### Configuration\n\nThe grid use same defaults than [`flexboxgrid.css`](https://github.com/kristoferjoseph/flexboxgrid).\n\nYou can customize values using [`\u003cThemeProvider\u003e`](https://github.com/styled-components/styled-components#theming) component from styled-components.\n`react-styled-flexboxgrid` will looks at the `flexboxgrid` property in the theme.\n\n```JSX\nimport React from 'react'\n\nimport {ThemeProvider} from 'styled-components'\nimport {Grid, Col, Row} from 'react-styled-flexboxgrid'\n\nconst theme = {\n  flexboxgrid: {\n    // Defaults\n    gridSize: 12, // columns\n    gutterWidth: 1, // rem\n    outerMargin: 2, // rem\n    mediaQuery: 'only screen',\n    container: {\n      sm: 46, // rem\n      md: 61, // rem\n      lg: 76  // rem\n    },\n    breakpoints: {\n      xs: 0,  // em\n      sm: 48, // em\n      md: 64, // em\n      lg: 75  // em\n    }\n  }\n}\n\nconst App = props =\u003e\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cGrid\u003e\n      \u003cRow\u003e\n        \u003cCol xs={6} md={3}\u003eHello, world!\u003c/Col\u003e\n      \u003c/Row\u003e\n    \u003c/Grid\u003e\n  \u003c/ThemeProvider\u003e\n```\n\n## Use with Emotion\nTo use react-styled-flexboxgrid with emotion, import from 'react-styled-flexboxgrid/emotion':\n\n```jsx\nimport { Grid, Col, Row } from 'react-styled-flexboxgrid/emotion'\n```\n\n## Related projects\n\n- [styled-components](https://github.com/styled-components/styled-components)\n- [hedron](https://github.com/JSBros/hedron)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floicmahieu%2Freact-styled-flexboxgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floicmahieu%2Freact-styled-flexboxgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floicmahieu%2Freact-styled-flexboxgrid/lists"}