This component is a modified version of the Semantic UI Grid. More in-depth documentation can be found there.

Default Grid

The default grid is 12 columns with 16px gutters.

const ExampleColumn = () => (
    <div style={{
        background: '#00FFFD',
        opacity: .2,
        width: '100%',
        height: '100px',
        minWidth: 1
    }} />
);
render (
    <Container>
        <Grid>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
    </Container>
)

Relaxed

A relaxed grid has 32px gutters

const ExampleColumn = () => (
    <div style={{
        background: '#00FFFD',
        opacity: .2,
        width: '100%',
        height: '100px',
        minWidth: 1
    }} />
);
render (
    <Container>
        <Grid relaxed>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
    </Container>
)

Very Relaxed Grid

A very relaxed grid has 48px gutters. A larger gutter is useful in grids with only 3 or 4 columns.

const ExampleColumn = () => (
    <div style={{
        background: '#00FFFD',
        opacity: .2,
        width: '100%',
        height: '100px',
        minWidth: 1
    }} />
);
render (
    <Container>
        <Grid relaxed="very">
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
    </Container>
)

Less than 12 Columns

A grid can have less than 12 columns. Common uses for these are for 4-up, 3-up, and 50/50 layouts

const ExampleColumn = () => (
    <div style={{
        background: '#00FFFD',
        opacity: .2,
        width: '100%',
        height: '100px',
        minWidth: 1
    }} />
);
render (
    <Container>
        <Grid columns={4}>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <Grid columns={3}>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <Grid columns={2}>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <br/><br/><br/>
        <Grid columns={4} relaxed>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <Grid columns={3} relaxed>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <Grid columns={2} relaxed>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <br/><br/><br/>
        <Grid columns={4} relaxed="very">
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <Grid columns={3} relaxed="very">
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
        <Grid columns={2} relaxed="very">
            <Grid.Column><ExampleColumn/></Grid.Column>
            <Grid.Column><ExampleColumn/></Grid.Column>
        </Grid>
    </Container>
)

Full Documentation

Our Grid has been modified from the Semantic UI grid to have 12 columns by default and to follow our Spacing rules. Most of Semantic's variations are supported.


Importing

import { Grid } from '@servicetitan/design-system';