Arterial Layout Grid

Another React Material Layout Grid

Installation

npm install @arterial/layout-grid

Usage

Styles

Sass

@use "@material/layout-grid/mdc-layout-grid.scss";

CSS

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

JSX

import {Grid, GridRow, GridCell} from '@arterial/layout-grid';

Regular Layout Grid

<Grid className="grid grid--regular">
  <GridRow>
    <GridCell className="grid-cell"></GridCell>
    <GridCell className="grid-cell"></GridCell>
    <GridCell className="grid-cell"></GridCell>
  </GridRow>
</Grid>

Other Variants

Left Aligned

<Grid className="grid grid--regular" align="left">
  <GridRow>
    <GridCell className="grid-cell"></GridCell>
    <GridCell className="grid-cell"></GridCell>
    <GridCell className="grid-cell"></GridCell>
  </GridRow>
</Grid>

Right Aligned

<Grid className="grid grid--regular" align="right">
  <GridRow>
    <GridCell className="grid-cell"></GridCell>
    <GridCell className="grid-cell"></GridCell>
    <GridCell className="grid-cell"></GridCell>
  </GridRow>
</Grid>

Columns

<Grid className="grid">
  <GridRow>
    <GridCell className="grid-cell" span={6}></GridCell>
    <GridCell className="grid-cell" span={3}></GridCell>
    <GridCell className="grid-cell" span={2}></GridCell>
    <GridCell className="grid-cell" span={1}></GridCell>
    <GridCell className="grid-cell" span={3}></GridCell>
    <GridCell className="grid-cell" span={1}></GridCell>
    <GridCell className="grid-cell" span={8}></GridCell>
  </GridRow>
</Grid>

Cell Alignment

<Grid className="grid grid--cell-alignment">
  <GridRow className="grid-inner">
    <GridCell className="grid-cell grid-cell--alignment" align="top"></GridCell>
    <GridCell
      className="grid-cell grid-cell--alignment"
      align="middle"
    ></GridCell>
    <GridCell
      className="grid-cell grid-cell--alignment"
      align="bottom"
    ></GridCell>
  </GridRow>
</Grid>

Props

Grid

Name	Type	Description
align	left | right	Specifies alignment of the whole grid. Defaults to center.
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
fixedColumnWidth	boolean	Enables a fixed width column variant.
tag	string | object	HTML tag to be applied to the root element. Defaults to div.

GridRow

Name	Type	Description
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
tag	string | object	HTML tag to be applied to the root element. Defaults to div.

GridCell

Name	Type	Description
align	tope | middle | bottom	Specifies alignment of the whole grid. Defaults to center.
children	node	Elements to be displayed within root element.
className	string	Classes to be applied to the root element.
order	number	Specifies order of the cell.
span	number	Specifies the number of columns the cell spans.
spanDesktop	number	Specifies the number of columns the cell spans on a desktop.
spanPhone	number	Specifies the number of columns the cell spans on a phone.
spanTablet	number	Specifies the number of columns the cell spans on a tablet.
tag	string | object	HTML tag to be applied to the root element. Defaults to div.