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.
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...
Responsive Prop
To make it easy applying grid layouts, all props provided by Grid are Responsive Props.
Loading...
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 | 🚫 | - |