MaterialR Layout Grid

@materialr/layout-grid

Material layout grid implementation for React

Installation

$ npm install --save @materialr/layout-grid

Demo

A full demo is available on the MaterialR website showcasing all variants.

Components

Named exports

import { Cell } from '@materialr/layout-grid';

Props

Prop	Type	Required	Default	Description
align	enum (bottom/middle/top)	No	undefined	The vertical alignment of contents within the cell
children	node	No	undefined	The children to render within the cell
className	string	No	undefined	Additional classNames to add to the cell
columns	enum (1-12)	No	undefined	The column width of the cell
desktop	enum (1-12)	No	undefined	The column width of the cell on desktop
phone	enum (1-4)	No	undefined	The column width of the cell on phone
tablet	enum (1-8)	No	undefined	The column width of the cell on tablet

import { Grid } from '@materialr/layout-grid';

Props

Prop	Type	Required	Default	Description
align	enum (left/right)	No	undefined	The horizontal alignment of contents within the grid
children	node	Yes	undefined	The children to render within the grid
className	string	No	undefined	Additional classNames to add to the grid

import { Row } from '@material/layout-grid';

Props

Prop	Type	Required	Default	Description
children	node	Yes	undefined	The children to render within the row
className	string	No	undefined	Additional classNames to add to the row