Grid

Simple grid system components inspired in MaterializeCSS. Currently it supports rows, columns, nested rows, small, medium, large and xlarge column sizes and its respectives offsets.

<Row>
    <Col s={12} l={6}>First</Col>
    <Col s={12} l={6}>Second</Col>
    <Col s={12} l={6} offset={['l3']}>Third</Col>
</Row>

The <Row /> components is a shortcut for <Grid row /> and the <Col /> component is a shortcut for <Grid col />.

It is possible to create a component which is a row and a column at the same time, you can pass row and col as true at the same time.

<Row col s={12}>
    <p>App Content</p>
</Row>

A nested row would not required lateral margins so you can use:

<Row col s={12}>
    <p>Rows inside rows:</p>
    <Row nested>
        <Col s={12}>
            <p>Awesome</p>
        </Col>
    </Row>
</Row>

Prop name	Type	Default	Description
theme	any	Required
classes	any	Required
row	bool		If component is a row.
nested	bool		If row is nested inside another one.
noMargin	bool		Don’t add margin bottom to the row.
col	bool		If component is a column.
noGutter	bool		Don’t add lateral paddings to column.
s	number		The number of columns in small breakpoint.
m	number		The number of columns in medium breakpoint.
l	number		The number of columns in large breakpoint.
xl	number		The number of columns in extra large breakpoint.
offset	string[]	`[]`	A list of offset definitions for each breakpoint. Example: `['m4', 'l2']` creates an offset of 4 columns on medium breakpoint and an offset of 2 columns on large breakpoint.

Source code: src/Grid Open in: Playground