# Grid

```tsx
import { Grid } from "@chakra-ui/react"
import { Box } from "@chakra-ui/react"

export const GridBasic = () => {
  return (
    <Grid templateColumns="repeat(3, 1fr)" gap="6">
      <Box h="20" />
      <Box h="20" />
      <Box h="20" />
    </Grid>
  )
}

```

## 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.

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

export const GridWithColSpan = () => {
  return (
    <Grid templateColumns="repeat(4, 1fr)" gap="6">
      <GridItem colSpan={2}>
        <Box h="20" />
      </GridItem>
      <GridItem colSpan={1}>
        <Box h="20" />
      </GridItem>
      <GridItem colSpan={1}>
        <Box h="20" />
      </GridItem>
    </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

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

export const GridSpanningColumns = () => {
  return (
    <Grid
      h="200px"
      templateRows="repeat(2, 1fr)"
      templateColumns="repeat(5, 1fr)"
      gap={4}
    >
      <GridItem rowSpan={2} colSpan={1}>
        <Box>rowSpan=2</Box>
      </GridItem>
      <GridItem colSpan={2}>
        <Box>colSpan=2</Box>
      </GridItem>
      <GridItem colSpan={2}>
        <Box>colSpan=2</Box>
      </GridItem>
      <GridItem colSpan={4}>
        <Box>colSpan=4</Box>
      </GridItem>
    </Grid>
  )
}

```

## Props

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| templateColumns | undefined | `SystemStyleObject['gridTemplateColumns'] \| undefined` | undefined |
| autoFlow | undefined | `SystemStyleObject['gridAutoFlow'] \| undefined` | undefined |
| autoRows | undefined | `SystemStyleObject['gridAutoRows'] \| undefined` | undefined |
| autoColumns | undefined | `SystemStyleObject['gridAutoColumns'] \| undefined` | undefined |
| templateRows | undefined | `SystemStyleObject['gridTemplateRows'] \| undefined` | undefined |
| templateAreas | undefined | `SystemStyleObject['gridTemplateAreas'] \| undefined` | undefined |
| column | undefined | `SystemStyleObject['gridColumn'] \| undefined` | undefined |
| row | undefined | `SystemStyleObject['gridRow'] \| undefined` | undefined |
| inline | undefined | `boolean \| undefined` | undefined |
| as | undefined | `React.ElementType` | The underlying element to render. |
| asChild | undefined | `boolean` | Use the provided child element as the default rendered element, combining their props and behavior. |