---
title: Grid
description: Used to manage grid layouts
links:
  source: components/grid
  storybook: components-grid--basic
---

<ExampleTabs name="grid-basic" />

## Usage

```jsx
import { Grid, GridItem } from "@chakra-ui/react"
```

```jsx
<Grid>
  <GridItem />
  <GridItem />
</Grid>
```

## Examples

### Col Span

Pass `colSpan` prop to `GridItem` to span across columns.

<ExampleTabs name="grid-with-col-span" />

### Spanning Columns

In some layouts, you may need certain grid items to span specific amount of
columns or rows instead of an even distribution

<ExampleTabs name="grid-spanning-columns" />

## Props

<PropTable component="Grid" part="Grid" />
