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 |