---
name: Grid
route: /grid/
---

import { Playground } from 'docz';
import { Grid, Content } from '../..'; 
import * as demos from '../../demos'; 

<demos.Star/>

# Grid 

Lays out children in a vertically + horizontally spaced layout. You normally use it with fixed size children as shown below:

<Playground>
  <Grid>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
  </Grid>
</Playground>

## Spacing

```ts
 /** 
   * Minimum spacing between children
   */
  spacing?:
    | CSSLength
    | [/** Vertical */ CSSLength, /** Horizontal */ CSSLength]
```
Example (`vertical spacing=40px, horizontal spacing=20px`): 

<Playground>
  <Grid spacing={[40,20]}>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
  </Grid>
</Playground>

> Default `vertical` and `horizontal` [spacing is 24px][defaults].

## Justify

```ts
 /** 
   * Controls how the extra space around the children is handled
   */
  justify?:
  /** Controls by child placement */
  | 'left' /** default */
  | 'center'
  | 'right'
  /** Controls by space */
  | 'space-between'
  | 'space-around'
```

> We've seen the default `left` already (the extra space gets put on the right). We cover the rest below.

Example `center` (the extra space gets put around the children):

<Playground>
  <Grid justify="center">
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
  </Grid>
</Playground>

Example `right` (the extra space gets put at the left): 

<Playground>
  <Grid justify="right">
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={180} height={200} style={{backgroundColor: "lightskyblue"}}>Item</Content>
  </Grid>
</Playground>

Example `space-between` (the extra space goes between items): 

<Playground>
  <Grid justify="space-between">
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
  </Grid>
</Playground>

Example `space-around` (the extra space goes around items): 

<Playground>
  <Grid justify="space-around">
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
    <Content width={145} height={145} style={{backgroundColor: "lightskyblue"}}>Item</Content>
  </Grid>
</Playground>

## BaseProps

`Grid` [supports all `BaseProps`][common-types].

## SizingProp

`Grid` supports the `sizing` prop as explained in the [sizing principle][principle-sizing].

[common-types]:../common-types/
[principle-spacing]:../principle-spacing/
[principle-sizing]:../principle-sizing/
[defaults]:../defaults/