layout-grid

✨ Are you a part of the Material Design web community? Help us improve by filling out this 10 minute survey. ✨

React Layout Grid

A React version of an MDC Layout Grid.

Installation

npm install @material/react-layout-grid

Usage

Styles

with Sass:

import '@material/react-layout-grid/index.scss';

with CSS:

import '@material/react-layout-grid/dist/layout-grid.css';

Javascript Instantiation

import React from 'react';
import {Cell, Grid, Row} from '@material/react-layout-grid';

class MyApp extends React.Component {
  render() {
    return (
      <Grid>
        <Row>
          <Cell columns={4}>Tennis</Cell>
          <Cell columns={4}>Cricket</Cell>
          <Cell columns={4}>StarCraft</Cell>
        </Row>
        <Row>
          <Cell desktopColumns={4} order={2} phoneColumns={4} tabletColumns={4}>Tennis</Cell>
          <Cell desktopColumns={4} order={3} phoneColumns={4} tabletColumns={4}>Cricket</Cell>
          <Cell desktopColumns={4} order={1} phoneColumns={4} tabletColumns={4}>StarCraft</Cell>
        </Row>
        <Row>
          <Cell columns={4}>
            <Row>
              <Cell desktopColumns={8} phoneColumns={2} tabletColumns={5}>Tennis</Cell>
              <Cell desktopColumns={4} phoneColumns={2} tabletColumns={3}>Cricket</Cell>
            </Row>
          </Cell>
          <Cell columns={4}> - </Cell>
          <Cell columns={4}> - </Cell>
        </Row>
      </Grid>
    );
  }
}

// with alignment
class MyAppAligned extends React.Component {
  render() {
    return (
      <Grid align="right">
        <Row>
          <Cell align="top">Tennis<br /><br /><br /><br /><br /></Cell>
          <Cell align="middle">Cricket</Cell>
          <Cell align="bottom">StarCraft</Cell>
        </Row>
      </Grid>
    );
  }
}

Components

Grid

Props

Prop Name	Type	Description
align	String (left or right)	An optional alignment of the grid contents
children	Node	A React node to render within the Grid, usually a Row or Rows
className	String	Classes to be applied to the root element
tag	String	The tag type to render (default 'div')

Row

Props

Prop Name	Type	Description
children	Node	A React node to render within the Row, usually a Cell or Cells
className	String	Classes to be applied to the root element
tag	String	The tag type to render (default 'div')

Cell

Props

Prop Name	Type	Description
align	String (bottom, middle or top)	An optional alignment of the cell contents
children	Node	A React node to render within the Cell
className	String	Classes to be applied to the root element
columns	Number (1-12)	The width of the cell on all devices
desktopColumns	Number (1-12)	The width of the cell on desktop
order	Number (1-12)	The order that the cell is displayed in
phoneColumns	Number (1-8)	The width of the cell on phones
tabletColumns	Number (1-4)	The width of the cell on tablets
tag	String	The tag type to render (default 'div')

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins