Grid

Grid is a Box with display: grid and it comes with helpful styles shorthand.

Import

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

Behavior

Loading...

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

Features

Template Areas

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

Loading...

Template Columns

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

Loading...

Template Rows

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

Loading...

Props

Grid

You can use all the props accepted by the JSX element you defined with as, which is div by default. And also, the props that mirror the types of grid styles:

Name	Shorthand for
gap	gridGap
rowGap	gridRowGap
columnGap	gridColumnGap
templateAreas	gridTemplateAreas
templateRows	gridTemplateRows
templateColumns	gridTemplateColumns

GridItem

You can use all the props accepted by the JSX element you defined with as, which is div by default. And also, the props that have the same type of grid styles:

Name	Shorthand for
area	gridArea