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 '@stacks/ui';import { Grid } from '@stacks/ui';

Usage

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

Verbose Prop	Shorthand Prop
`gridArea`	`area`
`gridTemplateAreas`	`templateAreas`
`gridGap`	`gap`
`gridRowGap`	`rowGap`
`gridColumnGap`	`columnGap`
`gridAutoColumns`	`autoColumns`
`gridColumn`	`column`
`gridRow`	`row`
`gridAutoFlow`	`autoFlow`
`gridAutoRows`	`autoRows`
`gridTemplateRows`	`templateRows`
`gridTemplateColumns`	`templateColumns`

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

Search docs

⌘

On this page

Grid

Import

Usage