Material Components React Layout Grid
npm install @material/react-layout-gridA React version of an MDC Layout Grid.
```
npm install @material/react-layout-grid
with Sass:
`js`
import '@material/react-layout-grid/index.scss';
with CSS:
`js`
import '@material/react-layout-grid/dist/layout-grid.css';
js
import React from 'react';
import {Cell, Grid, Row} from '@material/react-layout-grid';class MyApp extends React.Component {
render() {
return (
Tennis |
Cricket |
StarCraft |
Tennis |
Cricket |
StarCraft |
Tennis | Cricket | |
- |
- |
);
}
}
// with alignment
class MyAppAligned extends React.Component {
render() {
return (
Tennis
|
Cricket |
StarCraft |
);
}
}
`Components
$3
#### Props
Prop Name | Type | Description
--- | --- | ---
align | String (
left or right) | An optional alignment of the grid contents
children | Node | A React node to render within the Grid, usually a Row or Rows
className | String | Classes to be applied to the root element
tag | String | The tag type to render (default 'div')$3
#### Props
Prop Name | Type | Description
--- | --- | ---
children | Node | A React node to render within the Row, usually a
Cell or Cells
className | String | Classes to be applied to the root element
tag | String | The tag type to render (default 'div')$3
#### Props
Prop Name | Type | Description
--- | --- | ---
align | String (
bottom, middle or top) | An optional alignment of the cell contents
children | Node | A React node to render within the Cell
className | String | Classes to be applied to the root element
columns | Number (1-12) | The width of the cell on all devices
desktopColumns | Number (1-12) | The width of the cell on desktop
order | Number (1-12) | The order that the cell is displayed in
phoneColumns | Number (1-4) | The width of the cell on phones
tabletColumns | Number (1-8) | The width of the cell on tablets
tag | String | The tag type to render (default 'div'`)Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.