Grid

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

Import#

import { Grid } from "@chakra-ui/core";

Usage#

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

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

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

Props#

Grid composes Box so you can pass all the Box prop and related css grid props.