API Reference
Grid layout
<Grid columns="repeat(3, 1fr)"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </Grid>
Parameters
props
- Type:
@vtex/shoreline-components.GridProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>
Props
areas (optional)
CSS grid-template-areas
-
Type:
csstype.Property.GridTemplateAreas -
Default:
'auto'
asChild (optional)
Children composition
-
Type:
boolean -
Default:
false
autoColumns (optional)
CSS grid-auto-columns
-
Type:
csstype.Property.GridAutoColumns<0 | string & { }> -
Default:
'auto'
autoFlow (optional)
CSS grid-auto-flow
-
Type:
csstype.Property.GridAutoFlow -
Default:
'row'
autoRows (optional)
CSS grid-auto-rows
-
Type:
csstype.Property.GridAutoRows<0 | string & { }> -
Default:
'auto'
columns (optional)
CSS grid-template-columns
-
Type:
csstype.Property.GridTemplateColumns<0 | string & { }> -
Default:
'auto'
gap (optional)
CSS Gap
-
Type:
csstype.Property.GridGap<0 | string & { }> -
Default:
'$space-gap'
rows (optional)
CSS grid-template-rows
-
Type:
csstype.Property.GridTemplateRows<0 | string & { }> -
Default:
'auto'