# Grid

## Columns

Patchwork uses a responsive grid inspired by Material Design from Google. This grid slices up the screen into a set of vertical 'columns', with fixed gutters in between. You can wrap your components in the `<GridItem>` component, specifying how many columns you want it to take up (i.e. span) horizontally.

If you specify a set of `<GridItem>`s whose spans add up to more than the total number of columns, the grid items will wrap to the next row. The grid may also wrap if you use too many gutters at the small breakpoint since the gutters are 30px, e.g. `11*30=330` which is larger than the smallest phone we support (`320px`).

At this time, all breakpoints use a 12-column grid.

## Breakpoints

- Small: 0-800px
- Medium: 800-1200px
- Large: 1200-1440px
- X-Large: 1440px+

You can specify the column span independently for each breakpoint:

## Example usage

```jsx
<Grid>
  <GridItem sm={x} md={y} lg={z}> ... </GridItem>
  <GridItem sm={x} md={y} lg={z}> ... </GridItem>
</Grid>
```

* `<Grid sm={4}>`: Spans 4 columns in all breakpoints
* `<Grid sm={4} md={6}`>: Spans 4 cols in the small breakpoint and 6 in the medium, large and xlarge breakpoints.
* `<Grid sm={4} md={6} lg={5}`>: Spans 4 cols in the small breakpoint, 6 in the medium breakpoint, 5 in the large breakpoint and xlarge breakpoint.

## Container padding

The grid container is padded on a per-breakpoint basis to account for horizontal space from the sides of the screen for widths smaller than the 1440px max-width container size.

- Small: 30px
- Medium: 60px
- Large: 120px
- XLarge: 120px
