{"id":13755456,"url":"https://github.com/trendmicro-frontend/react-grid-system","last_synced_at":"2025-06-26T12:31:38.154Z","repository":{"id":57167615,"uuid":"120416139","full_name":"trendmicro-frontend/react-grid-system","owner":"trendmicro-frontend","description":"React Grid System component","archived":false,"fork":false,"pushed_at":"2019-11-13T10:01:50.000Z","size":3321,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-29T10:13:36.395Z","etag":null,"topics":["col","container","grid","grid-system","layout","react","responsive","row"],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-grid-system/","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/trendmicro-frontend.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":"2018-02-06T07:12:24.000Z","updated_at":"2021-02-03T04:44:30.000Z","dependencies_parsed_at":"2022-08-30T15:22:16.525Z","dependency_job_id":null,"html_url":"https://github.com/trendmicro-frontend/react-grid-system","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/trendmicro-frontend/react-grid-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-grid-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-grid-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-grid-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-grid-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-grid-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-grid-system/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262067911,"owners_count":23253698,"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":["col","container","grid","grid-system","layout","react","responsive","row"],"created_at":"2024-08-03T10:00:54.498Z","updated_at":"2025-06-26T12:31:38.043Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"readme":"# react-grid-system [![build status](https://travis-ci.org/trendmicro-frontend/react-grid-system.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-grid-system) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-grid-system/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-grid-system?branch=master)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-grid-system.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-grid-system/)\n\nReact Grid System component\n\nDemo: https://trendmicro-frontend.github.io/react-grid-system\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-grid-system](https://github.com/trendmicro-frontend/react-grid-system):\n\n  ```\n  npm install --save react @trendmicro/react-grid-system\n  ```\n\n2. At this point you can import `@trendmicro/react-grid-system` and its styles in your application as follows:\n\n  ```js\n  import {\n      Provider as GridSystemProvider,\n      Container, Row, Col,\n      Visible, Hidden\n  } from '@trendmicro/react-grid-system';\n\n  // Be sure to include styles at some point, probably during your bootstraping\n  import '@trendmicro/react-grid-system/dist/react-grid-system.css';\n  ```\n\n## Recommended Setup\n\nCreate a common components directory including the GridSystem component, as shown below:\n```\ncomponents/\n  GridSystem/\n    index.js\n```\n\n**components/GridSystem/index.js**\n```jsx\nimport '@trendmicro/react-grid-system/dist/react-grid-system.css';\nexport {\n      Provider,\n      Container, Row, Col,\n      Visible, Hidden\n} from '@trendmicro/react-grid-system';\n```\n\nThen, import components like below:\n```jsx\nimport {\n      Provider as GridSystemProvider,\n      Container, Row, Col,\n      Visible, Hidden\n} from './components/GridSystem';\n```\n\n## Usage\n\n```jsx\n\u003cContainer fluid gutterWidth={0}\u003e\n    \u003cRow\u003e\n        \u003cCol xs md={8}\u003ecol-md-8\u003c/Col\u003e\n        \u003cCol width={6} md={4}\u003ecol-6 col-md-4\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n        \u003cCol width={6} md={4}\u003ecol-6 col-md-4\u003c/Col\u003e\n        \u003cCol width={6} md={4}\u003ecol-6 col-md-4\u003c/Col\u003e\n        \u003cCol width={6} md={4}\u003ecol-6 col-md-4\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cRow\u003e\n        \u003cCol width={6}\u003ecol-6\u003c/Col\u003e\n        \u003cCol width={6}\u003ecol-6\u003c/Col\u003e\n    \u003c/Row\u003e\n\u003c/Container\u003e\n```\n\n### Provider\n\nYou can wrap `\u003cContainer /\u003e`, `\u003cRow /\u003e`, and `\u003cCol /\u003e` in `\u003cProvider /\u003e` to pass grid system config through context.\n\n```jsx\n\u003cProvider\n    breakpoints={[576, 768, 992, 1200, 1600]}\n    containerWidths={[540, 720, 960, 1140, 1440]}\n    columns={12}\n    gutterWidth={0}\n    layout=\"flexbox\"\n\u003e\n    \u003cContainer fluid\u003e\n        \u003cRow\u003e\n            \u003cCol\u003ecol\u003c/Col\u003e\n            \u003cCol\u003ecol\u003c/Col\u003e\n            \u003cCol\u003ecol\u003c/Col\u003e\n        \u003c/Row\u003e\n    \u003c/Container\u003e\n    \u003cContainer\n        fluid\n        columns={24}\n        gutterWidth={30}\n        layout=\"floats\"\n    \u003e\n        \u003cRow\u003e\n            \u003cCol\u003ecol\u003c/Col\u003e\n            \u003cCol\u003ecol\u003c/Col\u003e\n        \u003c/Row\u003e\n    \u003c/Container\u003e\n\u003c/Provider\u003e\n```\n\n### Responsive Utilities\n\nUse responsive utilities for showing and hiding content based on current viewport.\n\n#### Hidden\n\nMake an element hidden when the viewport is at the given breakpoint.\n\n```jsx\n\u003cHidden xs sm\u003e\n    Hidden on extra small and small\n\u003c/Hidden\u003e\n\u003cHidden md lg\u003e\n    Hidden on medium and large\n\u003c/Hidden\u003e\n```\n\n#### Visible\n\nMake an element visible when the viewport is at the given breakpoint.\n\n```jsx\n\u003cVisible xs\u003e\n    Visible on extra small\n\u003c/Visible\u003e\n\u003cVisible sm\u003e\n    Visible on small\n\u003c/Visible\u003e\n\u003cVisible md\u003e\n    Visible on medium\n\u003c/Visible\u003e\n\u003cVisible lg\u003e\n    Visible on large\n\u003c/Visible\u003e\n\u003cVisible xl\u003e\n    Visible on extra large\n\u003c/Visible\u003e\n\u003cVisible xxl\u003e\n    Visible on double extra large\n\u003c/Visible\u003e\n```\n\n#### ScreenClass\n\nRender content based on the screen class.\n\n```jsx\n\u003cScreenClass\u003e\n    {screenClass =\u003e \u003cdiv\u003e{screenClass}\u003c/div\u003e}\n\u003c/ScreenClass\u003e\n```\n\n```jsx\n\u003cScreenClass\n    render={screenClass =\u003e \u003cdiv\u003e{screenClass}\u003c/div\u003e }\n/\u003e\n```\n\n## API\n\n### Properties\n\n#### Provider\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nbreakpoints | Number[] | [576, 768, 992, 1200, 0] | The breakpoints (minimum width) of devices in screen class `sm`, `md`, `lg`, `xl`, and `xxl`.\ncontainerWidths | Number[] | [540, 720, 960, 1140, 0] | The container widths in pixels of devices in screen class `sm`, `md`, `lg`, `xl`, and `xxl`.\ncolumns | Number | 12 | The number of columns.\ngutterWidth | Number | 0 | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.\nlayout | One of:\u003cbr\u003e'flexbox'\u003cbr\u003e'floats' | 'flexbox' | The grid system layout.\n\n#### Container\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nfluid | Boolean | false | True makes the container full-width, false fixed-width.\nxs | Boolean | false | True makes container fluid only in `xs`, not present means fluid everywhere.\nsm | Boolean | false | True makes container fluid only in `sm`, not present means fluid everywhere.\nmd | Boolean | false | True makes container fluid only in `md`, not present means fluid everywhere.\nlg | Boolean | false | True makes container fluid only in `lg`, not present means fluid everywhere.\nxl | Boolean | false | True makes container fluid only in `xl`, not present means fluid everywhere.\nxxl | Boolean | false | True makes container fluid only in `xxl`, not present means fluid everywhere.\ncolumns | Number | inherited | The number of columns.\ngutterWidth | Number | inherited | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column.\nlayout | One of:\u003cbr\u003e'flexbox'\u003cbr\u003e'floats' | inherited | The grid system layout.\n\n#### Row\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\n\n#### Col\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nwidth | Number or 'auto' | | The width of the column for all screen classes.\u003cbr\u003eNote: 'auto' is only supported with the flexbox layout.\nxs | Number, Boolean or 'auto' | | The width of the column for screen class `xs`.\u003cbr\u003eNote: 'auto' and _true_ are only supported with the flexbox layout.\nsm | Number, Boolean or 'auto' | | The width of the column for screen class `sm`.\u003cbr\u003eNote: 'auto' and _true_ are only supported with the flexbox layout.\nmd | Number, Boolean or 'auto' | | The width of the column for screen class `md`.\u003cbr\u003eNote: 'auto' and _true_ are only supported with the flexbox layout.\nlg | Number, Boolean or 'auto' | | The width of the column for screen class `lg`.\u003cbr\u003eNote: 'auto' and _true_ are only supported with the flexbox layout.\nxl | Number, Boolean or 'auto' | | The width of the column for screen class `xl`.\u003cbr\u003eNote: 'auto' and _true_ are only supported with the flexbox layout.\nxxl | Number, Boolean or 'auto' | | The width of the column for screen class `xxl`.\u003cbr\u003eNote: 'auto' and _true_ are only supported with the flexbox layout.\noffset | { xs, sm, md, lg, xl, xxl } | | The offset of this column for all screen classes.\npull | { xs, sm, md, lg, xl, xxl } | | The amount this column is pulled to the left for all screen classes.\npush | { xs, sm, md, lg, xl, xxl } | | The amount this column is pushed to the right for all screen classes.\n\n#### Visible\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nxs | Boolean | false | Visible on extra small devices.\nsm | Boolean | false | Visible on small devices. \nmd | Boolean | false | Visible on medimum devices.\nlg | Boolean | false | Visible on large devices.\nxl | Boolean | false | Visible on extra large devices.\nxxl | Boolean | false | Visible on double extra large devices.\n\n#### Hidden\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nxs | Boolean | false | Hidden on extra small devices.\nsm | Boolean | false | Hidden on small devices. \nmd | Boolean | false | Hidden on medimum devices.\nlg | Boolean | false | Hidden on large devices.\nxl | Boolean | false | Hidden on extra large devices.\nxxl | Boolean | false | Hidden on double extra large devices.\n\n#### ScreenClass\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nrender | Function(screenClass) | | The render function that returns a React element.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-grid-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-grid-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-grid-system/lists"}