{"id":3959,"url":"https://github.com/GeekyAnts/react-native-easy-grid","last_synced_at":"2025-08-13T23:30:46.991Z","repository":{"id":41162016,"uuid":"58056343","full_name":"GeekyAnts/react-native-easy-grid","owner":"GeekyAnts","description":"Easy React Native Layout \u0026 Grid for the Dumb","archived":false,"fork":false,"pushed_at":"2019-11-02T01:07:08.000Z","size":88,"stargazers_count":2174,"open_issues_count":26,"forks_count":169,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-12-12T19:08:35.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GeekyAnts.png","metadata":{"files":{"readme":"README.md","changelog":"ChangeLog.md","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":"2016-05-04T13:58:29.000Z","updated_at":"2024-12-11T19:55:25.000Z","dependencies_parsed_at":"2022-07-14T08:49:23.821Z","dependency_job_id":null,"html_url":"https://github.com/GeekyAnts/react-native-easy-grid","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekyAnts%2Freact-native-easy-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekyAnts%2Freact-native-easy-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekyAnts%2Freact-native-easy-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GeekyAnts%2Freact-native-easy-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GeekyAnts","download_url":"https://codeload.github.com/GeekyAnts/react-native-easy-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229786916,"owners_count":18123998,"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-01-05T20:16:56.580Z","updated_at":"2024-12-15T05:30:28.749Z","avatar_url":"https://github.com/GeekyAnts.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"readme":"# React Native Easy Grid 🐵\n![Master Build Status](https://travis-ci.org/GeekyAnts/react-native-easy-grid.svg?branch=master) \u003cbr /\u003e\n\nThis is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.\n\n## Installation\n\n```\nnpm install react-native-easy-grid --save\n```\n\n## Usage\n\n### Include the components\n\n```\nimport { Col, Row, Grid } from \"react-native-easy-grid\";\n```\n\n### 1. Two columns (50% and 50%)\n\n```\n\u003cGrid\u003e\n    \u003cCol\u003e\u003c/Col\u003e\n    \u003cCol\u003e\u003c/Col\u003e\n\u003c/Grid\u003e\n```\n\n![col-50-50](Examples/col-50-50.png \"Column 50% and 50% example\")\n\n\n\n\u003e Note: If you don't assign the size property, it defaults to equal width (or height) with its siblings\n\n### 2. Two rows\n\n```\n\u003cGrid\u003e\n    \u003cRow\u003e\u003c/Row\u003e\n    \u003cRow\u003e\u003c/Row\u003e\n\u003c/Grid\u003e\n```\n\n![row-50-50](Examples/row-50-50.png \"Row 50% and 50% example\")\n\n\n### 3. Two rows (75% and 25%)\n\n```\n\u003cGrid\u003e\n    \u003cRow size={75}\u003e\u003c/Row\u003e\n    \u003cRow size={25}\u003e\u003c/Row\u003e\n\u003c/Grid\u003e\n```\n\nThis is exactly same as\n\n```\n\u003cGrid\u003e\n    \u003cRow size={3}\u003e\u003c/Row\u003e\n    \u003cRow size={1}\u003e\u003c/Row\u003e\n\u003c/Grid\u003e\n```\n\n![row-75-25](Examples/row-75-25.png \"Row 75% and 25% example\")\n\n\u003e Same concept applies to `\u003cCol /\u003e`\n\n\n### 4. Three columns (33.33% each)\n\n```\n\u003cGrid\u003e\n    \u003cCol\u003e\u003c/Col\u003e\n    \u003cCol\u003e\u003c/Col\u003e\n    \u003cCol\u003e\u003c/Col\u003e\n\u003c/Grid\u003e\n```\n![col-33-33-33](Examples/col-33-33-33.png \"Column 33.33% each\")\n\n### 5. Three rows (50%, 25% and 25%)\n\n```\n\u003cGrid\u003e\n    \u003cRow size={2}\u003e\u003c/Row\u003e\n    \u003cRow size={1}\u003e\u003c/Row\u003e\n    \u003cRow size={1}\u003e\u003c/Row\u003e\n\u003c/Grid\u003e\n```\n\n![row-50-25-25](Examples/row-50-25-25.png \"Row 50%, 25% and 50% example\")\n\n### 6. Nested Layout or Grid\n\n\u003ctable width=\"100\" height=\"100\"\u003e\n    \u003ctr\u003e\n        \u003ctd rowspan=\"2\" bgcolor=\"red\" width=\"50\"\u003e1\u003c/td\u003e\n        \u003ctd bgcolor=\"yellow\" width=\"50\" height=\"50\"\u003e2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd bgcolor=\"blue\"\u003e3\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n```\n\u003cGrid\u003e\n    \u003cCol\u003e\n        \u003cText\u003e1\u003c/Text\u003e\n    \u003c/Col\u003e\n    \u003cCol\u003e\n        \u003cRow\u003e\n            \u003cText\u003e2\u003c/Text\u003e\n        \u003c/Row\u003e\n        \u003cRow\u003e\n            \u003cText\u003e3\u003c/Text\u003e\n        \u003c/Row\u003e\n    \u003c/Col\u003e\n\u003c/Grid\u003e\n```\n\n![complex](Examples/complex.png \"Complex and Nested Layouts\")\n\n\n\n### 7. Fixed width and fluid width combination\n\n```\n\u003cGrid\u003e\n    \u003cCol style={{ width: 40 }}\u003e\n        \u003cText\u003eFixed width\u003c/Text\u003e\n    \u003c/Col\u003e\n    \u003cCol\u003e\n        \u003cText\u003eFluid width\u003c/Text\u003e\n    \u003c/Col\u003e\n\u003c/Grid\u003e\n```\n\n![col-fluid-fixed.png](Examples/col-fluid-fixed.png \"Column fluid and fixed example\")\n\n\n### 8. Fixed height and fluid height combination\n\n```\n\u003cGrid\u003e\n    \u003cRow style={{ height: 40 }}\u003e\n        \u003cText\u003eFixed width\u003c/Text\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n        \u003cText\u003eFluid width\u003c/Text\u003e\n    \u003c/Row\u003e\n\u003c/Grid\u003e\n```\n\nDo you think anything could be simpler than that? This repo is part of our bigger project called [NativeBase.io](http://nativebase.io). Do check that!\n\n# Important note about usage with `\u003cScrollView /\u003e`\n\n\u003e Note: If you're using `\u003cRow /\u003e` inside a `\u003cScrollView /\u003e`, the height of the \u003cRow /\u003e component would be flexible according to the content, though you can always apply the `height` styling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeekyAnts%2Freact-native-easy-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGeekyAnts%2Freact-native-easy-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeekyAnts%2Freact-native-easy-grid/lists"}