LayoutGrid
Grid
The Grid layout primitive is a thin abstraction over the CSS grid layout.
GridProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
alignContent | ResponsiveProp<CSSProperties['alignContent']> | — | — | Aligns the whole grid along the Column/Block axis |
alignItems | ResponsiveProp<CSSProperties['alignItems']> | — | — | Aligns the grid items (in their respective cells) along the Column/Block axis |
children | ReactNode | — | — | The content of this grid element. |
columnGap | ResponsiveProp<keyof BalanceTheme['spacing']> | — | — | Specifies width of the gutters between the columns |
gap | ResponsiveProp<keyof BalanceTheme['spacing']> | — | — | The size of the gap between rows and columns |
grid | ResponsiveProp<CSSProperties['grid']> | — | — | Sets all of the explicit and implicit grid properties in a single declaration. |
gridAutoColumns | ResponsiveProp<CSSProperties['gridAutoColumns']> | — | — | Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). |
gridAutoFlow | ResponsiveProp<CSSProperties['gridAutoFlow']> | — | — | Defines how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. |
gridAutoRows | ResponsiveProp<CSSProperties['gridAutoRows']> | — | — | Specifies the width of any auto-generated grid tracks (aka implicit grid tracks). |
gridTemplate | ResponsiveProp<CSSProperties['gridTemplate']> | — | — | A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration. |
gridTemplateAreas | ResponsiveProp<CSSProperties['gridTemplateAreas']> | — | — | Defines a grid template by referencing the names of the grid areas which are specified with the 'grid-area' property. |
gridTemplateColumns | ResponsiveProp<CSSProperties['gridTemplateColumns']> | — | — | Defines the columns of the grid with a space-separated list of values (e.g. 50px, 1fr, auto). |
gridTemplateRows | ResponsiveProp<CSSProperties['gridTemplateRows']> | — | — | Defines the rows of the grid with a space-separated list of values (e.g. 50px, 1fr, auto). |
inline | boolean | — | — | Display as an inline-level grid container. |
justifyContent | ResponsiveProp<CSSProperties['justifyContent']> | — | — | Aligns the whole grid along the Row/Inline axis |
justifyItems | ResponsiveProp<CSSProperties['justifyItems']> | — | — | Aligns the grid items (in their respective cells) along the Row/Inline axis |
rowGap | ResponsiveProp<keyof BalanceTheme['spacing']> | — | — | Specifies width of the gutters between the rows |
Also accepts BoxProps | ||||