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 |