3.0.0 • Published 3 years ago
@arterial/layout-grid v3.0.0
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. |
3.0.0
3 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
1.0.3
4 years ago
1.0.0-alpha.6
4 years ago
1.0.0-alpha.5
4 years ago
1.0.0-alpha.4
4 years ago
1.0.0-alpha.3
4 years ago
1.0.0-alpha.1
4 years ago
1.0.0-alpha.0
4 years ago