react-material-responsive-grid v1.2.2

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

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

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

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