---
id: grid
category: layout
title: Grid
package: '@chakra-ui/layout'
description: Grid is a layout for managing grid layouts
---

## Import

```js
import { Grid, GridItem } from '@chakra-ui/react'
```

- **Grid:** The main wrapper with `display: grid`.
- **GridItem:** Used as a child of `Grid` to control the span, and start
  positions within the grid.

## Template columns

Here's an example of using grid template columns with the `grid` component, and
applying a `gap` or space between the grid items.

```jsx
<Grid templateColumns='repeat(5, 1fr)' gap={6}>
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
</Grid>
```

## Spanning columns

In some layouts, you may need certain grid items to span specific amount of
columns or rows instead of an even distribution. To achieve this, you need to
pass the `colSpan` prop to the `GridItem` component to span across columns and
also pass the `rowSpan` component to span across rows. You also need to specify
the `templateColumns` and `templateRows`.

```jsx
<Grid
  h='200px'
  templateRows='repeat(2, 1fr)'
  templateColumns='repeat(5, 1fr)'
  gap={4}
>
  <GridItem rowSpan={2} colSpan={1} bg='tomato' />
  <GridItem colSpan={2} bg='papayawhip' />
  <GridItem colSpan={2} bg='papayawhip' />
  <GridItem colSpan={4} bg='tomato' />
</Grid>
```

## Starting and ending lines

Pass the `colStart` and `colEnd` prop to `GridItem` component to make an element
start or end at the `nth` grid position.

```jsx
<Grid templateColumns='repeat(5, 1fr)' gap={4}>
  <GridItem colSpan={2} h='10' bg='tomato' />
  <GridItem colStart={4} colEnd={6} h='10' bg='papayawhip' />
</Grid>
```

## Template areas

The `templateAreas` prop specifies areas within the grid layout. Use template
literals to name the area. Now you can reference the area by passing `area` prop
in the `<GridItem />` component.

```jsx
<Grid
  templateAreas={`"header header"
                  "nav main"
                  "nav footer"`}
  gridTemplateRows={'50px 1fr 30px'}
  gridTemplateColumns={'150px 1fr'}
  h='200px'
  gap='1'
  color='blackAlpha.700'
  fontWeight='bold'
>
  <GridItem pl='2' bg='orange.300' area={'header'}>
    Header
  </GridItem>
  <GridItem pl='2' bg='pink.300' area={'nav'}>
    Nav
  </GridItem>
  <GridItem pl='2' bg='green.300' area={'main'}>
    Main
  </GridItem>
  <GridItem pl='2' bg='blue.300' area={'footer'}>
    Footer
  </GridItem>
</Grid>
```