Grid

A primitive useful for grid layouts. Grid is CBox with display: grid and comes with helpful style shorthand. It renders a div element.

Import#

import { CGrid, CGridItem } from '@chakra-ui/vue'

Usage#

Using the Grid component, here are some helpful shorthand props:

While you can pass the verbose props, using the shorthand can save you some time.

<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
  <c-box w="100%" h="10" bg="blue.300" />
  <c-box w="100%" h="10" bg="vue.300" />
  <c-box w="100%" h="10" bg="orange.300" />
  <c-box w="100%" h="10" bg="pink.300" />
  <c-box w="100%" h="10" bg="red.300" />
</c-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 CGridItem component to span across columns and also pass the rowSpan component to span across rows. You also need to specify the templateColumns and templateRows.

<c-grid
  h="200px"
  w="600px"
  template-rows="repeat(2, 1fr)"
  template-columns="repeat(5, 1fr)"
  gap="6"
>
  <c-grid-item row-span="2" col-span="1" bg="blue.300" />
  <c-grid-item col-span="2" bg="red.300" />
  <c-grid-item col-span="2" bg="red.300" />
  <c-grid-item col-span="4" bg="blue.300" />
</c-grid>

Starting and Ending Lines#

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

<c-grid w="600px" template-columns="repeat(5, 1fr)" gap="6">
  <c-grid-item col-span="2" h="10" bg="blue.300" />
  <c-grid-item col-start="4" col-end="6" h="10" bg="red.300" />
</c-grid>

Props#

CGrid composes the CBox component. So it accepts all Box props along with the related CSS grid props. See Box component for list of props

CGridItem Props#

CGridItem composes CBox so you can pass all CBox props.