Grid

Used to manage grid layouts

import { Grid } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

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

Usage

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

<Grid>
  <GridItem />
  <GridItem />
</Grid>

Examples

Col Span

Pass colSpan prop to GridItem to span across columns.

import { Grid, GridItem } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

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

rowSpan=2

colSpan=2

colSpan=4

import { Grid, GridItem } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"

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

Props

Prop	Default	Type
`templateColumns`		`SystemStyleObject['gridTemplateColumns']`
`autoFlow`		`SystemStyleObject['gridAutoFlow']`
`autoRows`		`SystemStyleObject['gridAutoRows']`
`autoColumns`		`SystemStyleObject['gridAutoColumns']`
`templateRows`		`SystemStyleObject['gridTemplateRows']`
`templateAreas`		`SystemStyleObject['gridTemplateAreas']`
`column`		`SystemStyleObject['gridColumn']`
`row`		`SystemStyleObject['gridRow']`
`inline`		`boolean`

Float

Group