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 nameTypeDefaultDescription
themeanyRequired
classesanyRequired
rowbool

If component is a row.

nestedbool

If row is nested inside another one.

noMarginbool

Don’t add margin bottom to the row.

colbool

If component is a column.

noGutterbool

Don’t add lateral paddings to column.

snumber

The number of columns in small breakpoint.

mnumber

The number of columns in medium breakpoint.

lnumber

The number of columns in large breakpoint.

xlnumber

The number of columns in extra large breakpoint.

offsetstring[][]

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