{"id":21404772,"url":"https://github.com/fakundo/react-grid-is-good","last_synced_at":"2026-01-03T05:36:02.510Z","repository":{"id":65372968,"uuid":"75790523","full_name":"fakundo/react-grid-is-good","owner":"fakundo","description":"React grid system","archived":false,"fork":false,"pushed_at":"2017-07-06T16:04:32.000Z","size":68,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-15T01:10:36.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fakundo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-07T02:20:12.000Z","updated_at":"2017-07-13T11:07:29.000Z","dependencies_parsed_at":"2023-01-19T23:35:21.265Z","dependency_job_id":null,"html_url":"https://github.com/fakundo/react-grid-is-good","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-grid-is-good","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-grid-is-good/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-grid-is-good/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Freact-grid-is-good/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fakundo","download_url":"https://codeload.github.com/fakundo/react-grid-is-good/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243902291,"owners_count":20366259,"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":[],"created_at":"2024-11-22T16:18:00.928Z","updated_at":"2026-01-03T05:36:02.460Z","avatar_url":"https://github.com/fakundo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Grid System\n\n[![npm](https://img.shields.io/npm/v/react-grid-is-good.svg?maxAge=2592000)](https://www.npmjs.com/package/react-grid-is-good)\n\n### Installation\n```\nnpm install react-grid-is-good\n```\n\n### Features\n- inline styles\n- flex\n- responsive\n- custom breakpoints with your own names\n- automatically breaks overflowing rows\n- based on Bootstrap styles\n\n### Examples\n```js\nimport React, { Component } from 'react';\nimport { Grid, Span, Visible, Hidden } from 'react-grid-is-good';\n\nclass GridComponent extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cGrid\u003e\n          \u003cSpan size=\"25%\"\u003e#1\u003c/Span\u003e\n          \u003cSpan size=\"75%\"\u003e#2\u003c/Span\u003e\n        \u003c/Grid\u003e\n        \n        \u003cGrid align=\"center\"\u003e\n          \u003cSpan size=\"1/2\"\u003e#1\u003c/Span\u003e\n          \u003cSpan size=\"1/2\"\u003e#2\u003c/Span\u003e\n        \u003c/Grid\u003e\n        \n        \u003cGrid size=\"12\"\u003e\n          \u003cSpan size=\"6\"\u003e#1\u003c/Span\u003e\n          \u003cSpan size=\"6\"\u003e#2\u003c/Span\u003e\n          \u003cSpan size=\"3\"\u003e#3\u003c/Span\u003e\n          \u003cSpan size=\"3\"\u003e#4\u003c/Span\u003e\n          \u003cSpan size=\"6\"\u003e#5\u003c/Span\u003e\n        \u003c/Grid\u003e\n        \n        \u003cGrid size=\"12\"\u003e\n          \u003cSpan size=\"3\"\u003e#1\u003c/Span\u003e\n          \u003cSpan size=\"3\" push=\"3\"\u003e#2\u003c/Span\u003e\n        \u003c/Grid\u003e\n        \n        \u003cGrid size=\"12\"\u003e\n          \u003cSpan size=\"3\" push=\"6\"\u003e#1\u003c/Span\u003e\n          \u003cSpan size=\"3\"\u003e#2\u003c/Span\u003e\n        \u003c/Grid\u003e\n        \n        \u003cGrid breakpoint=\"small\" size=\"12\"\u003e\n          \u003cSpan sizeSmall=\"6\"\u003e#1\u003c/Span\u003e\n          \u003cSpan sizeSmall=\"6\"\u003e#2\u003c/Span\u003e\n        \u003c/Grid\u003e\n        \n        \u003cVisible breakpoint=\"tablet\" mobile tablet\u003e\n          I am visible when breakpoint is \"tablet\" or \"mobile\"\n        \u003c/Visible\u003e\n\n        \u003cHidden breakpoint=\"sm\" md lg\u003e\n          I am hidden when breakpoint is \"md\" or \"lg\"\n        \u003c/Hidden\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Component properties\n#### Grid\n\n  - **`breakpoint`** `{string} [breakpoint]`\n  - **`size`** `{number} [size=12]`\n  - **`gutter`** `{number} [gutter=0]`\n  - **`align`** `{string} [align='left']`\n  - **`valign`** `{string} [valign='top']`\n  - ...props based on your breakpoint, for example if you pass `breakpoint=\"desktop\"` and `sizeDesktop=\"12\"` then size will be `12`\n\n#### Span\n\n  - **`size`** `{string} [size=1]`\n  - **`pull`** `{string} [pull=0]`\n  - **`push`** `{string} [push=0]`\n  - **`offset`** `{string} [offset=0]`\n  - **`break`** `{boolean} [break=false]`\n  - **`align`** `{string} [align='left']`\n  - **`valign`** `{string} [valign='top']`\n  - ...props based on your breakpoint\n\n#### Visible\n\n  - **`breakpoint`** `{string} [breakpoint]` \n  - ...your breakpoints to set visibility`\n\n#### Hidden\n\n  - **`breakpoint`** `{string} [breakpoint]` \n  - ...your breakpoints to set visibility`\n\n### How to use\nYou should wrap all components and pass to them your own \"breakpoint\" property. \nThis property can be calculated the way you like.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Freact-grid-is-good","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffakundo%2Freact-grid-is-good","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Freact-grid-is-good/lists"}