A set of React components implementing the material-responsive-grid CSS framework.
npm i react-material-responsive-grid --save
Container for Row components, intended as a layout
- Adheres to Material Design responsive UI standards for screens at or exceeding 1600 px
- Fluid by default, allows the Grid to continue
- Margin by default, preserves the outer padding for outer columns, preventing a row of content from spanning edge to edge
- Optionally fixed width for viewports larger than 1599 px, centered or left aligned
- Optionally marginless, allow row content to span from edge to edge
| Name | Default | Value | Description |
|---|---|---|---|
| fixed | { left or center } | Grid is fixed width and aligned as specified for viewports larger than 1599px | |
| marginless | false | Boolean | Grid has no margin, row content can span edge to edge |
| tagName | div | The type of tag to use when rendering this element | |
| className | The CSS class name of this element |
Container for Col components, implemented with flexbox
- Reverse the flow direction of contained Col components
- Horizontal alignment based on flow direction, start, center, or end
- Vertically align contained Col components, top, middle, bottom
- Evenly distribute unconsumed space around or between contained Col components
| Name | Default | Value | Description |
|---|---|---|---|
| reverse | false | Boolean | Reverse direction of this row |
| start | Array of sizes | Justify content to the start for the specified sizes (based on direction) | |
| center | Array of sizes | Center content within this row for the specified sizes | |
| end | Array of sizes | Justify content to the end for the specified sizes (based on direction) | |
| top | Array of sizes | Vertically align content to top for the specified sizes | |
| middle | Array of sizes | Vertically align content to middle for the specified sizes | |
| bottom | Array of sizes | Vertically align content to bottom for the specified sizes | |
| around | Array of sizes | Evenly distribute unused space around columns for the specified sizes | |
| between | Array of sizes | Evenly distribute unused space between columns for the specified sizes | |
| tagName | div | The type of tag to use when rendering this element | |
| className | The CSS class name of this element |
Responsively sized, positioned, and visible component contained by a Row
- Responsive width expressed as columns consumed
- Offset expressed as columns skipped before consuming columns
- Responsively hide for any configuration of screen sizes
- Force to beginning or end of Row
| Name | Default | Value | Description |
|---|---|---|---|
| xs4 | Integer, 1-4 | Number of columns to consume on extra-small (4 column) viewports | |
| xs8 | Integer, 1-8 | Number of columns to consume on extra-small (8 column) viewports | |
| sm8 | Integer, 1-8 | Number of columns to consume on small (8 column) viewports | |
| sm12 | Integer, 1-12 | Number of columns to consume on small (12 column) viewports | |
| sm | Integer, 1-12 | Shorthand for sm12 | |
| md12 | Integer, 1-12 | Number of columns to consume on medium (12 column) viewports | |
| md | Integer, 1-12 | Shorthand for md12 | |
| lg12 | Integer, 1-12 | Number of columns to consume on large (12 column) viewports | |
| lg | Integer, 1-12 | Shorthand for lg12 | |
| xl12 | Integer, 1-12 | Number of columns to consume on extra-large (12 column) viewports | |
| xl | Integer, 1-12 | Shorthand for xl12 | |
| xs4Offset | Integer, 0-3 | Number of columns to offset on extra-small (4 column) viewports | |
| xs8Offset | Integer, 0-7 | Number of columns to offset on extra-small (8 column) viewports | |
| sm8Offset | Integer, 0-7 | Number of columns to offset on small (8 column) viewports | |
| sm12Offset | Integer, 0-11 | Number of columns to offset on small (12 column) viewports | |
| smOffset | Integer, 0-11 | Shorthand for sm12Offset | |
| md12Offset | Integer, 0-11 | Number of columns to offset on medium (12 column) viewports | |
| mdOffset | Integer, 0-11 | Shorthand for md12Offset | |
| lg12Offset | Integer, 0-11 | Number of columns to offset on large (12 column) viewports | |
| lgOffset | Integer, 0-11 | Shorthand for lg12Offset | |
| xl12Offset | Integer, 0-11 | Number of columns to offset on extra-large (12 column) viewports | |
| xlOffset | Integer, 0-11 | Shorthand for xl12Offset | |
| first | Array of sizes | Present this column first for the specified sizes (based on row direction) | |
| last | Array of sizes | Present this column last for the specified sizes (based on row direction) | |
| hiddenOnly | Array of sizes | Hide this column for the specified sizes | |
| hiddenDown | Size | Hide this column for sizes equal to or smaller than the specified size | |
| hiddenUp | Size | Hide this column for sizes equal to or larger than the specified size | |
| tagName | div | The type of tag to use when rendering this element | |
| className | The CSS class name of this element |
import React from 'react';
import { Grid, Row, Col } from 'react-material-responsive-grid';
class App extends React.Component {
render() {
return (
<Grid>
<Row>
<Col xs4={4} lg={6}>
<p>This column consumes the entire row for extra-small,
small, and medium screens. For large and extra-large
screens, it consumes half of the row.</p>
</Col>
<Col hiddenDown="md" lg={6}>
<p>This column isn't visible for extra-small, small,
and medium screens, but is visible for large and
extra-large screens. It consumes half of the row.</p>
</Col>
<Col hiddenDown="sm" hiddenUp="xl" md={12}>
<p>This column is only visible for medium and large
screens and consumes the entire row.</p>
</Col>
<Col hidden={['sm8', 'sm', 'lg']} xs4={4}>
<p>This column is hidden for small and large screens
and consumes the entire row.</p>
</Col>
</Row>
</Grid>
);
}
}