{"id":23107899,"url":"https://github.com/ryu-man/reactjs-layouts","last_synced_at":"2026-05-09T14:34:06.371Z","repository":{"id":57348314,"uuid":"339559225","full_name":"ryu-man/reactjs-layouts","owner":"ryu-man","description":"Easily structure your React app using CSS Flexbox \u0026 Grid declarative components","archived":false,"fork":false,"pushed_at":"2021-02-25T18:58:10.000Z","size":715,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T13:27:50.434Z","etag":null,"topics":["css","css-flexbox","css-grid","flexbox","flexbox-layout","grid","grid-layout","html","layout","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/ryu-man.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":"2021-02-16T23:28:46.000Z","updated_at":"2022-03-10T03:39:46.000Z","dependencies_parsed_at":"2022-08-31T16:44:32.415Z","dependency_job_id":null,"html_url":"https://github.com/ryu-man/reactjs-layouts","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/ryu-man%2Freactjs-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Freactjs-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Freactjs-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryu-man%2Freactjs-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryu-man","download_url":"https://codeload.github.com/ryu-man/reactjs-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247092373,"owners_count":20882217,"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":["css","css-flexbox","css-grid","flexbox","flexbox-layout","grid","grid-layout","html","layout","react"],"created_at":"2024-12-17T01:16:25.207Z","updated_at":"2026-05-09T14:34:06.329Z","avatar_url":"https://github.com/ryu-man.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n\t\u003cimg alt=\"LAYOUTS\" src=\"./banner.png\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.com/package/reactjs-layouts\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/reactjs-layouts.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/ryu-man/reactjs-layouts/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/reactjs-layouts.svg\" alt=\"license\"\u003e\n  \u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=reactjs-layouts\"\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/min/reactjs-layouts\"/\u003e\n\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=reactjs-layouts\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/minzip/reactjs-layouts\"\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\n# Layouts\n\nThis project is an implementation of css Flexbox \u0026 Grid for [React](https://reactjs.org/) library\n\n## Install\n\n```bash\n// npm\nnpm install reactjs-layouts\n\n// yarn\nyarn add reactjs-layouts\n```\n\n## Get started\n\nLayouts have three main components: Row, Col (Column) and Grid.\n\n_Note: react-layouts support type definitions_\n\n## Row / Col\n\n```js\n    import { Row, Col } from 'reactjs-layouts'\n\n    const Component = ()=\u003e{\n        return (\n            \u003c\u003e\n                // control how elements are positioned horizontally\n                \u003cRow justifyContent=\"space-between\"\u003e\u003c/Row\u003e\n                \n                \u003cCol\u003e\u003c/Col\u003e\n            \u003c/\u003e\n        )\n    }\n\n```\n\n| Prop           | Type    |\n| -------------- | ------- |\n| justifyContent | string  |\n| alignItems     | string  |\n| alignContent   | string  |\n| wrap           | string  |\n| inline         | boolean |\n| reverse        | boolean |\n| alignSelf      | string  |\n| gap            | string  |\n| fluid          | string  |\n\n## Grid\n\n```js\n    import { Grid } from 'reactjs-layouts'\n\n    const Component = ()=\u003e{\n        return (\n            // Define the number \u0026 width of rows and columns\n            \u003cGrid templateRows=\"auto\" templateCols=\"20vw 1fr\"\u003e\u003c/Grid\u003e\n        )\n    }\n```\n\n| Prop           | Type    |\n| -------------- | ------- |\n| templateCols   | string  |\n| templateRows   | string  |\n| templateAreas  | string  |\n| colGap         | string  |\n| rowGap         | string  |\n| autoCols       | string  |\n| autoRows       | string  |\n| justifyContent | string  |\n| alignItems     | string  |\n| alignContent   | string  |\n| alignSelf      | string  |\n| wrap           | string  |\n| inline         | boolean |\n| reverse        | boolean |\n| fluid          | string  |\n\n## Content\n\nAs You can use any HTML element in the content you can also use predefined items which let you have more control over the element directly\n\n```jsx\nimport { Row } from 'reactjs-layouts'\n\nconst Component = ()=\u003e{\n    return (\n        \u003cRow\u003e\n            // Create div element\n            // can't control directly\n            \u003cdiv\u003e\u003c/div\u003e\n\n            // Create a div item\n            // you can use content props only\n            \u003cRow.item\u003e\u003c/Row.item\u003e\n\n            // Create a row item\n            // you can use Row props + content props\n            \u003cRow.row\u003e\u003c/Row.row\u003e\n\n            // Create a Col item\n            // you can use Column props + content props\n            \u003cRow.col\u003e\u003c/Row.col\u003e\n\n            // Create a grid item\n            // you can use Grid props + content props\n            \u003cRow.grid\u003e\u003c/Row.grid\u003e\n        \u003c/Row\u003e\n    )\n}\n```\n\n### Row/Col Content Props\n\n| Prop      | Type   |\n| --------- | ------ |\n| order     | string |\n| grow      | string |\n| shrink    | string |\n| basis     | string |\n| alignSelf | string |\n\n```jsx\n    import { Grid } from 'reactjs-layouts'\n\n    const Component = ()=\u003e{\n        return (\n            \u003cGrid\u003e\n                // Create div element, can't controls directly\n                // can't control directly\n                \u003cdiv\u003e\u003c/div\u003e\n            \n                // Create a div item\n                // you can use content props only\n                \u003cGrid.item\u003e\u003c/Grid.item\u003e\n            \n                // Create a row item \n                // you can use Row props + content props\n                \u003cGrid.row\u003e\u003c/Grid.row\u003e\n            \n                // Create a column item\n                // you can use Column props + content props\n                \u003cGrid.col\u003e\u003c/Grid.col\u003e\n            \n                // Create a grid item \n                // you can use Grid props + content props\n                \u003cGrid.grid\u003e\u003c/Grid.grid\u003e\n            \u003c/Grid\u003e\n        )\n    }\n```\n\n## Grid Content Props\n\n| Prop        | Type    |\n| ----------- | ------- |\n| justifySelf | string  |\n| alignSelf   | string  |\n| colStart    | string  |\n| colEnd      | boolean |\n| rowStart    | boolean |\n| rowEnd      | string  |\n| col         | string  |\n| row         | string  |\n| area        | string  |\n| fluid       | string  |\n\n## License\n\nsvelte-layouts is [MIT Licenced](./LICENSE)\n\n## Learn More\n\nif you want to learn more about css flexbox and grid and how they works, you can feel free to check out these useful links:\n\n- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\n- [Flexbox vs Grid](https://dev.to/nadayousry/grid-vs-flexbox-3fbh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Freactjs-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryu-man%2Freactjs-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryu-man%2Freactjs-layouts/lists"}