{"id":26546721,"url":"https://github.com/nickbullll/ReactSimpleFlexGrid","last_synced_at":"2025-03-22T05:20:00.748Z","repository":{"id":43543375,"uuid":"86802279","full_name":"nickbullll/ReactSimpleFlexGrid","owner":"nickbullll","description":"A way to quickly add a Grid Layout to your React app 🚀","archived":false,"fork":false,"pushed_at":"2022-12-11T15:23:12.000Z","size":2494,"stargazers_count":186,"open_issues_count":21,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-15T15:19:52.633Z","etag":null,"topics":["bootstrap","css","flexbox","grid","grid-layout","javascript","react","react-native","reactjs","redux","sass","ui"],"latest_commit_sha":null,"homepage":"https://github.com/abraztsov/ReactSimpleFlexGrid","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/nickbullll.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-03-31T09:28:23.000Z","updated_at":"2023-10-28T10:58:28.000Z","dependencies_parsed_at":"2023-01-27T02:01:07.351Z","dependency_job_id":null,"html_url":"https://github.com/nickbullll/ReactSimpleFlexGrid","commit_stats":null,"previous_names":["abraztsov/reactsimpleflexgrid"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2FReactSimpleFlexGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2FReactSimpleFlexGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2FReactSimpleFlexGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickbullll%2FReactSimpleFlexGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickbullll","download_url":"https://codeload.github.com/nickbullll/ReactSimpleFlexGrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244908718,"owners_count":20530093,"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":["bootstrap","css","flexbox","grid","grid-layout","javascript","react","react-native","reactjs","redux","sass","ui"],"created_at":"2025-03-22T05:19:59.995Z","updated_at":"2025-03-22T05:20:00.742Z","avatar_url":"https://github.com/nickbullll.png","language":"JavaScript","readme":"ReactSimpleFlexGrid\n=================\n[![npm version](https://badge.fury.io/js/react-simple-flex-grid.svg)](https://badge.fury.io/js/react-simple-flex-grid)\n\n\nA way to quickly add a Flexbox Grid Layout to your app 🚀\n\nLayout based on 12 Grids System.\n\n![demo](http://i.imgur.com/QCegsAg.gif)\n\nBasic Usage\n-----\n\n1. Install via `npm` and `yarn`\n\n    ```\n    npm i -S react-simple-flex-grid\n    \n    // or\n    \n    yarn add react-simple-flex-grid\n    ```\n2. Import `Row`, `Col` and grid styles\n\n    ```\n    import { Row, Col } from 'react-simple-flex-grid';\n    import \"react-simple-flex-grid/lib/main.css\";\n    ```\n3. Enjoy\n    ```\n    \u003cRow\u003e\n       \u003cCol span={6}\u003eColumn\u003c/Col\u003e\n       \u003cCol span={6}\u003eColumn\u003c/Col\u003e\n    \u003c/Row\u003e\n    ```\n\n  ![Imgur](http://i.imgur.com/UpGfkrh.png)\n\nCustomize\n-----\n\nBasic steps to customize grid.\n\n### Gutter 🌟\n\nYou can use the `gutter` (px) property of `Row` as grid spacing.\n\n```\n\u003cRow gutter={40}\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/xMjJwku.png)\n\n### Column Offset 😃\n\n`Offset` can set the column to the right side.\n\n```\n\u003cRow gutter={40}\u003e\n   \u003cCol span={4} offset={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/L2ZuRpa.png)\n\n### Column Order 🤙\n\n`Order` property can easily change column order.\n\n```\n\u003cRow gutter={40}\u003e\n   \u003cCol span={4} order={4}\u003e4 col-4\u003c/Col\u003e\n   \u003cCol span={4} order={3}\u003e3 col-4\u003c/Col\u003e\n   \u003cCol span={4} order={2}\u003e2 col-4\u003c/Col\u003e\n   \u003cCol span={4} order={1}\u003e1 col-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/7GQVn2D.png)\n\n### Column Sort 🤘\n\nFlexbox params `start`, `center`, `end`, `space-between` and `space-around` can be passed to `Row` and sort columns inside.\n\n```\n\u003cRow gutter={40} justify=\"start\" align=\"top\"\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/mk0x5P1.png)\n\n---\n\n```\n\u003cRow gutter={40} justify=\"center\" align=\"bottom\"\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/EcsT2MC.png)\n\n\n---\n\n```\n\u003cRow gutter={40} justify=\"end\" align=\"middle\"\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n   \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/O7lLHrr.png)\n\n### Responsive 💫\n\nBased on Bootstrap media queries here five dimensions: `xs`, `sm`, `md`, `lg`, `xl`.\n\n```\n\u003cRow gutter={40}\u003e\n  \u003cCol xs={2} sm={4} md={6} lg={8} xl={10}\u003exl-10\u003c/Col\u003e\n  \u003cCol xs={10} sm={8} md={6} lg={4} xl={2}\u003exl-2\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/uzX6yOb.png)\n\n### Exotic Responsive 🏝️\n\n`Span` and `offset` property can be embedded into `xs`, `sm`, `md`, `lg`, `xl` such as `xl = {{span: 10}}`.\n\n```\n\u003cRow gutter={40}\u003e\n  \u003cCol xs={{ span: 6, offset: 2 }}\u003exs-6\u003c/Col\u003e\n  \u003cCol span={4}\u003ecol-4\u003c/Col\u003e\n\u003c/Row\u003e\n```\n\n![Imgur](http://i.imgur.com/kiYepgp.png)\n\n## API\n\n### Row\n\n| Property | Description                                                                                         | Type   | Default |\n|----------|-----------------------------------------------------------------------------------------------------|--------|---------|\n| gutter   | grid spacing                                                                                        | number | 0       |\n| align    | the vertical alignment of the layout of flex: `top` `middle` `bottom` `stretch`                     | string | start   |\n| justify  | horizontal arrangement of the layout of flex: `start` `end` `center` `space-around` `space-between` | string | start   |\n\n### Col\n\n| Property | Description                                                                            | Type          | Default |\n|----------|----------------------------------------------------------------------------------------|---------------|---------|\n| span     | the number of cells,0 corresponds to display: none                                     | number        | none    |\n| offset   | the number of cells to the left of the grid spacing, no cell in grid spacing           | number        | 0       |\n| order    | `col` number in the row            | number        | none       |\n| xs       | \u003c768px and also default setting, could be a span value or a object contain above props | number/object | -       |\n| sm       | ≥768px, could be a span value or a object contain above props                          | number/object | -       |\n| md       | ≥992px, could be a span value or a object contain above props                          | number/object | -       |\n| lg       | ≥1200px, could be a span value or a object contain above props                         | number/object | -       |\n| xl       | ≥1600px, could be a span value or a object contain above props                         | number/object | -       |\n\nHow to test example locally ?\n---\n1. `git clone https://github.com/abraztsov/ReactSimpleFlexGrid.git`\n2. `cd ReactSimpleFlexGrid`\n3. `npm start`\n4. Go to `localhost:8080`\n\nFeature Requests / Find Bug ?\n---\n\nHave an idea for a package or a feature you'd love to see in ReactSimpleFlexGrid? Search for existing GitHub issues and join the conversation or create new!\n\n\nFAQ\n-----\n\nThis component based on [ant design grid]( https://ant.design/components/grid/). Huge thanks them for a such an awesome work.\n\n### Updates\n\nYou can see table for update information.\n\n| No.  |  Version  | Breakdown  | Ket. |\n| :------------: | :------------: | ------------ | ------------ |\n| 1.  | 1.0.1  |   | First Release |\n| 2.  | 1.0.2  | - Added autoprefixer |  |\n|     |        |  - Fixed Safari bug| |\n| 3.  | 1.0.3  | Removed unnecessary package  | | \n| 4.  | 1.1.0  |  Added order parameter  |  |  |\n| 5.  | 1.3.0  |  Added stretch option to align property |  |  |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickbullll%2FReactSimpleFlexGrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickbullll%2FReactSimpleFlexGrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickbullll%2FReactSimpleFlexGrid/lists"}