React Material Responsive Grid #

A set of React components implementing the material-responsive-grid CSS framework.

Installation ##

``
npm i react-material-responsive-grid --save
`

Components ##

$3

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




$3

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




$3

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

Example ##

`jsx
import React from 'react';
import { Grid, Row, Col } from 'react-material-responsive-grid';

class App extends React.Component {
render() {
return (





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.

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.

This column is only visible for medium and large
screens and consumes the entire row.

This column is hidden for small and large screens
and consumes the entire row.

);
}
}
``

Inspiration ##

- react-flexbox-grid
- react-bootstrap