A set of React components implementing the material-responsive-grid CSS framework.
npm install react-material-responsive-gridA 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
#### Features ####
- 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
#### Properties ####
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
#### Features ####
- 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
#### Properties ####
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
#### Features ####
- 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
#### Properties ####
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
`jsx
import React from 'react';
import { Grid, Row, Col } from 'react-material-responsive-grid';
class App extends React.Component { This column consumes the entire row for extra-small, This column isn't visible for extra-small, small, This column is only visible for medium and large This column is hidden for small and large screens
render() {
return (
small, and medium screens. For large and extra-large
screens, it consumes half of the row.
and medium screens, but is visible for large and
extra-large screens. It consumes half of the row.
screens and consumes the entire row.
and consumes the entire row.
);
}
}
``