React Layout Grid

A React version of an MDC Layout Grid.

Installation

``
npm install @material/react-layout-grid
`

Usage

$3

with Sass:
`js
import '@material/react-layout-grid/index.scss';
`

with CSS:
`js
import '@material/react-layout-grid/dist/layout-grid.css';
`

$3


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

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


Tennis
Cricket
StarCraft


Tennis
Cricket
StarCraft




Tennis
Cricket


-
-


);
}
}

// with alignment
class MyAppAligned extends React.Component {
render() {
return (


Tennis





Cricket
StarCraft


);
}
}
`

Components

$3

#### 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')

$3

#### 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')

$3

#### 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-4) | The width of the cell on phones
tabletColumns | Number (1-8) | 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