@primer/react-brand/docs/layout/Grid/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Grid
description: Use the grid component to create flexible and responsive grid-based layouts.
keywords: ['layout', 'responsive', 'columns', 'rows', 'spacing']
source: https://github.com/primer/brand/tree/main/packages/react/src/Grid/Grid.tsx
storybook: '/brand/storybook/?path=/story/components-grid--playground'
---

```js
import {Grid} from '@primer/react-brand'
```

## Examples

### Default

The `Grid` component uses a 12-column layout system. Use `span` to control the number of columns that should be displayed.

```jsx
<Grid enableOverlay>
  <Grid.Column span={1}></Grid.Column>
  <Grid.Column span={11}></Grid.Column>
  <Grid.Column span={2}></Grid.Column>
  <Grid.Column span={10}></Grid.Column>
  <Grid.Column span={3}></Grid.Column>
  <Grid.Column span={9}></Grid.Column>
  <Grid.Column span={4}></Grid.Column>
  <Grid.Column span={8}></Grid.Column>
  <Grid.Column span={5}></Grid.Column>
  <Grid.Column span={7}></Grid.Column>
  <Grid.Column span={6}></Grid.Column>
  <Grid.Column span={6}></Grid.Column>
  <Grid.Column span={7}></Grid.Column>
  <Grid.Column span={5}></Grid.Column>
  <Grid.Column span={8}></Grid.Column>
  <Grid.Column span={4}></Grid.Column>
  <Grid.Column span={9}></Grid.Column>
  <Grid.Column span={3}></Grid.Column>
  <Grid.Column span={10}></Grid.Column>
  <Grid.Column span={2}></Grid.Column>
</Grid>
```

### Nested grids

```jsx
<Grid enableOverlay>
  <Grid.Column>
    <Grid enableOverlay>
      <Grid.Column span={4}></Grid.Column>
      <Grid.Column span={4}></Grid.Column>
      <Grid.Column span={4}></Grid.Column>
    </Grid>
  </Grid.Column>
</Grid>
```

### Responsive behavior

Use `span` with an `Object` of breakpoint-specific keys and `number` values to enable responsive behavior.

Breakpoints use `min-width`, where it will also apply your chosen `span` value to all larger breakpoints.

```jsx
<Grid enableOverlay>
  <Grid.Column span={{xsmall: 12, small: 12, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 12, small: 12, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 12, small: 12, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 12, small: 12, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
  <Grid.Column span={{xsmall: 6, small: 6, medium: 6, large: 4, xlarge: 3, xxlarge: 2}} />
</Grid>
```

### Column offset

Use `start` to provide a positioning offset.

```jsx
<Grid enableOverlay>
  <Grid.Column span={3}></Grid.Column>
  <Grid.Column span={5} start={8}></Grid.Column>
</Grid>
```

## Component props

### Grid `Required`

| name            | type          | default     | required | description                               |
| --------------- | ------------- | ----------- | -------- | ----------------------------------------- |
| `as`            |               | `'div'`     | `false`  | The HTML element used to render the grid. |
| `columnGap`     |               | `'default'` | `false`  | Defines the gap between columns.          |
| `enableGutters` | `boolean`     | `true`      | `false`  | Enable or disable default gutters.        |
| `enableOverlay` | `boolean`     | `false`     | `false`  | Visual aid to help with alignment.        |
| `fullWidth`     | `boolean`     | `false`     | `false`  | Fills the width of the parent container   |
| `rowGap`        |               | `'default'` | `false`  | Defines the gap between rows.             |
| `className`     | `string`      |             | `false`  | Sets a custom class on the element.       |
| `children`      | `Grid.Column` |             | `true`   |                                           |
| `id`            | `string`      |             | `false`  | Sets a custom `id` attribute.             |

### Grid.Column `Required`

| name        | type                                                                             | default | required | description                                                        |
| ----------- | -------------------------------------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------ |
| `as`        | `'div' \| 'section' \| 'span'`                                                   | `'div'` | `false`  | The HTML element used to render the column.                        |
| `span`      | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 'ResponsiveMap'` | `12`    | `false`  | The number of columns the element should span or a responsive map. |
| `start`     | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 'ResponsiveMap'` |         | `false`  | The column index to start the element or a responsive map.         |
| `className` | `string`                                                                         |         | `false`  | Sets a custom class on the element                                 |
| `children`  | `ReactElement`                                                                   |         | `false`  |                                                                    |
| `id`        | `string`                                                                         |         | `false`  | Sets a custom `id`                                                 |