react-grid-system
React Grid System component.
Installation
- Install the latest version of react and react-grid-system:
npm install --save react @trendmicro/react-grid-system
- At this point you can import
@trendmicro/react-grid-system
and its styles in your application as follows:
Recommended Setup
Create a common components directory including the GridSystem component, as shown below:
components/
GridSystem/
index.js
components/GridSystem/index.js
Then, import components like below:
Usage
Provider
You can wrap <Container />
, <Row />
, and <Col />
in <Provider />
to pass grid system config through context.
Responsive Utilities
Use responsive utilities for showing and hiding content based on current viewport.
Hidden
Make an element hidden when the viewport is at the given breakpoint.
Visible
Make an element visible when the viewport is at the given breakpoint.
ScreenClass
Render content based on the screen class.
API
Properties
Provider
Name | Type | Default | Description |
---|---|---|---|
breakpoints | Number[] | [576, 768, 992, 1200, 0] | The breakpoints (minimum width) of devices in screen class sm , md , lg , xl , and xxl . |
containerWidths | Number[] | [540, 720, 960, 1140, 0] | The container widths in pixels of devices in screen class sm , md , lg , xl , and xxl . |
columns | Number | 12 | The number of columns. |
gutterWidth | Number | 0 | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column. |
layout | One of: 'flexbox' 'floats' |
'flexbox' | The grid system layout. |
Container
Name | Type | Default | Description |
---|---|---|---|
fluid | Boolean | false | True makes the container full-width, false fixed-width. |
xs | Boolean | false | True makes container fluid only in xs , not present means fluid everywhere. |
sm | Boolean | false | True makes container fluid only in sm , not present means fluid everywhere. |
md | Boolean | false | True makes container fluid only in md , not present means fluid everywhere. |
lg | Boolean | false | True makes container fluid only in lg , not present means fluid everywhere. |
xl | Boolean | false | True makes container fluid only in xl , not present means fluid everywhere. |
xxl | Boolean | false | True makes container fluid only in xxl , not present means fluid everywhere. |
columns | Number | inherited | The number of columns. |
gutterWidth | Number | inherited | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column. |
layout | One of: 'flexbox' 'floats' |
inherited | The grid system layout. |
Row
Name | Type | Default | Description |
---|
Col
Name | Type | Default | Description |
---|---|---|---|
width | Number or 'auto' | The width of the column for all screen classes. Note: 'auto' is only supported with the flexbox layout. |
|
xs | Number, Boolean or 'auto' | The width of the column for screen class xs .Note: 'auto' and true are only supported with the flexbox layout. |
|
sm | Number, Boolean or 'auto' | The width of the column for screen class sm .Note: 'auto' and true are only supported with the flexbox layout. |
|
md | Number, Boolean or 'auto' | The width of the column for screen class md .Note: 'auto' and true are only supported with the flexbox layout. |
|
lg | Number, Boolean or 'auto' | The width of the column for screen class lg .Note: 'auto' and true are only supported with the flexbox layout. |
|
xl | Number, Boolean or 'auto' | The width of the column for screen class xl .Note: 'auto' and true are only supported with the flexbox layout. |
|
xxl | Number, Boolean or 'auto' | The width of the column for screen class xxl .Note: 'auto' and true are only supported with the flexbox layout. |
|
offset | { xs, sm, md, lg, xl, xxl } | The offset of this column for all screen classes. | |
pull | { xs, sm, md, lg, xl, xxl } | The amount this column is pulled to the left for all screen classes. | |
push | { xs, sm, md, lg, xl, xxl } | The amount this column is pushed to the right for all screen classes. |
Visible
Name | Type | Default | Description |
---|---|---|---|
xs | Boolean | false | Visible on extra small devices. |
sm | Boolean | false | Visible on small devices. |
md | Boolean | false | Visible on medimum devices. |
lg | Boolean | false | Visible on large devices. |
xl | Boolean | false | Visible on extra large devices. |
xxl | Boolean | false | Visible on double extra large devices. |
Hidden
Name | Type | Default | Description |
---|---|---|---|
xs | Boolean | false | Hidden on extra small devices. |
sm | Boolean | false | Hidden on small devices. |
md | Boolean | false | Hidden on medimum devices. |
lg | Boolean | false | Hidden on large devices. |
xl | Boolean | false | Hidden on extra large devices. |
xxl | Boolean | false | Hidden on double extra large devices. |
ScreenClass
Name | Type | Default | Description |
---|---|---|---|
render | Function(screenClass) | The render function that returns a React element. |