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

Grid

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

Row

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

Col

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

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>
    );
  }
}

Inspiration

• react-flexbox-grid
• react-bootstrap