Skip to main content

Grid

Container element to arrange items on a page and create a responsive layout.

1

2

3

<Grid gap={2}>
  <Grid></Grid>
  <Grid></Grid>
  <Grid></Grid>
</Grid>

Props​

Wrap​

Make all child elements automatically the same width.

1

2

3

<Grid wrap></Grid>

Direction​

This prop overrides the flex-direction value of the component.

direction='column'

1

2

3

direction='columnReverse'

1

2

3

direction='row'

1

2

3

direction='rowReverse'

1

2

3

<Grid direction="column"></Grid>
<Grid direction="columnReverse"></Grid>
<Grid direction="row"></Grid>
<Grid direction="rowReverse"></Grid>

Justify​

This prop overrides the justify-content value of the component.

justify='center'

1

2

3

justify='end'

1

2

3

justify='start'

1

2

3

justify='spaceAround'

1

2

3

justify='spaceBetween'

1

2

3

justify='spaceEvenly'

1

2

3

<Grid justify="center"></Grid>
<Grid justify="end"></Grid>
<Grid justify="start"></Grid>
<Grid justify="spaceAround"></Grid>
<Grid justify="spaceBetween"></Grid>
<Grid justify="spaceEvenly"></Grid>

AlignItems​

This prop overrides the align-items value of the component.

items='stretch'

1

2

3

items='center'

1

2

3

items='end'

1

2

3

items='start'

1

2

3

items='baseline'

1

2

3

<Grids="stretch"></Grid>
<Grids="center"></Grid>
<Grids="end"></Grid>
<Grids="start"></Grid>
<Grids="baseline"></Grid>

AlignSelf​

This prop overrides the align-self value of the component.

self='stretch'

Stretch

self='center'

Center

self='end'

End

self='start'

Start

self='baseline'

Baseline

<Grid self="stretch"></Grid>
<Grid self="center"></Grid>
<Grid self="end"></Grid>
<Grid self="start"></Grid>
<Grid self="baseline"></Grid>

Gap​

gap={1}

1

2

3

gap={2}

1

2

3

gap={3}

1

2

3

gap={4}

1

2

3

gap={5}

1

2

3

gap={6}

1

2

3

gap={7}

1

2

3

gap={8}

1

2

3

gap={9}

1

2

3

gap={10}

1

2

3

gap={11}

1

2

3

gap={12}

1

2

3

<Grid gap={1}></Grid>
<Grid gap={2}></Grid>
<Grid gap={3}></Grid>
<Grid gap={4}></Grid>
<Grid gap={5}></Grid>
<Grid gap={6}></Grid>
<Grid gap={7}></Grid>
<Grid gap={8}></Grid>
<Grid gap={9}></Grid>
<Grid gap={10}></Grid>
<Grid gap={11}></Grid>
<Grid gap={12}></Grid>

Col​

Define the default width, based on a 12 column grid.

1

2

3

4

5

6

7

8

9

10

11

12

<Grid col={1}></Grid>
<Grid col={2}></Grid>
<Grid col={3}></Grid>
<Grid col={4}></Grid>
<Grid col={5}></Grid>
<Grid col={6}></Grid>
<Grid col={7}></Grid>
<Grid col={8}></Grid>
<Grid col={9}></Grid>
<Grid col={10}></Grid>
<Grid col={11}></Grid>
<Grid col={12}></Grid>

Colxs​

1

2

3

4

5

6

7

8

9

10

11

12

<Grid colxs={1}></Grid>
<Grid colxs={2}></Grid>
<Grid colxs={3}></Grid>
<Grid colxs={4}></Grid>
<Grid colxs={5}></Grid>
<Grid colxs={6}></Grid>
<Grid colxs={7}></Grid>
<Grid colxs={8}></Grid>
<Grid colxs={9}></Grid>
<Grid colxs={10}></Grid>
<Grid colxs={11}></Grid>
<Grid colxs={12}></Grid>

Colsm​

1

2

3

4

5

6

7

8

9

10

11

12

<Grid colsm={1}></Grid>
<Grid colsm={2}></Grid>
<Grid colsm={3}></Grid>
<Grid colsm={4}></Grid>
<Grid colsm={5}></Grid>
<Grid colsm={6}></Grid>
<Grid colsm={7}></Grid>
<Grid colsm={8}></Grid>
<Grid colsm={9}></Grid>
<Grid colsm={10}></Grid>
<Grid colsm={11}></Grid>
<Grid colsm={12}></Grid>

Colmd​

1

2

3

4

5

6

7

8

9

10

11

12

<Grid colmd={1}></Grid>
<Grid colmd={2}></Grid>
<Grid colmd={3}></Grid>
<Grid colmd={4}></Grid>
<Grid colmd={5}></Grid>
<Grid colmd={6}></Grid>
<Grid colmd={7}></Grid>
<Grid colmd={8}></Grid>
<Grid colmd={9}></Grid>
<Grid colmd={10}></Grid>
<Grid colmd={11}></Grid>
<Grid colmd={12}></Grid>

Collg​

1

2

3

4

5

6

7

8

9

10

11

12

<Grid collg={1}></Grid>
<Grid collg={2}></Grid>
<Grid collg={3}></Grid>
<Grid collg={4}></Grid>
<Grid collg={5}></Grid>
<Grid collg={6}></Grid>
<Grid collg={7}></Grid>
<Grid collg={8}></Grid>
<Grid collg={9}></Grid>
<Grid collg={10}></Grid>
<Grid collg={11}></Grid>
<Grid collg={12}></Grid>

Colxl​

1

2

3

4

5

6

7

8

9

10

11

12

<Grid colxl={1}></Grid>
<Grid colxl={2}></Grid>
<Grid colxl={3}></Grid>
<Grid colxl={4}></Grid>
<Grid colxl={5}></Grid>
<Grid colxl={6}></Grid>
<Grid colxl={7}></Grid>
<Grid colxl={8}></Grid>
<Grid colxl={9}></Grid>
<Grid colxl={10}></Grid>
<Grid colxl={11}></Grid>
<Grid colxl={12}></Grid>