Grid

What is this?

A component that represents a grid layout.

Template Areas

Example of using grid template areas and applying a gap or space between the items. You can combine with the GridItem area property.

Template Columns

Example of using grid template columns and applying a gap or space between the columns.

Template Rows

Example of using grid template rows and applying a gap or space between the rows.

Responsive Prop

To make it easy applying grid layouts, all props provided by Grid are Responsive Props.

Usage

import { Grid, GridItem } from '@vtex/admin-ui'

function Example() {
  return (
    <Grid
      templateAreas={[
        'item-1 item-2 item-3',
        'item-4 item-5 item-6',
        'item-7 item-8 item-9',
      ]}
      templateColumns="repeat(3, 1fr)"
      templateRows="repeat(3, 1fr)"
      gap="6"
    >
      <GridItem area="item-1" />
      <GridItem area="item-2" />
      <GridItem area="item-3" />
      <GridItem area="item-4" />
      <GridItem area="item-5" />
      <GridItem area="item-6" />
      <GridItem area="item-7" />
      <GridItem area="item-8" />
      <GridItem area="item-9" />
    </Grid>
  )
}

Composition

Name	Description	Props
Grid	The main wrapper with display: grid and helpful styles shorthand	GridProps
GridItem	Used as a child of Grid to control the gridArea position whithin the grid	GridItemProps

Props

Grid

Besides the props listed bellow, you can use all the props accepted by the div JSX element.

Name	Type	Description	Required	Default
gap	ResponsiveProp<CSS.gridGap>	Same as gridGap css property	🚫	-
rowGap	ResponsiveProp<CSS.GridRowGap>	Same as gridRowGap css property	🚫	-
columnGap	ResponsiveProp<CSS.GridColumnGap>	Same as gridColumnGap css property	🚫	-
templateAreas	ResponsiveProp<string[]>	Same as gridTemplateAreas css property	🚫	-
templateRows	ResponsiveProp<CSS.GridTemplateRows>	Same as gridTemplateRows css property	🚫	-
templateColumns	ResponsiveProp<CSS.GridTemplateColumns>	Same as gridTemplateColumns css property	🚫	-

GridItem

Besides the props listed bellow, you can use all the props accepted by the div JSX element.

Name	Type	Description	Required	Default
area	ResponsiveProp<CSS.GridArea>	Same as gridArea css property	🚫	-

• What is this?
• Template Areas
• Template Columns
• Template Rows
• Responsive Prop