Grid
Box display set to grid with shorthand entries.
version
5.0.0
install
yarn add @welcome-ui/grid
usage
import { Grid } from '@welcome-ui/grid'
Usage #
With the Grid component use shorthand props:
gridArea
isarea
gridAutoColumns
isautoColumns
gridAutoFlow
isautoFlow
gridAutoRows
isautoRows
gridColumn
iscolumn
columnGap
iscolumnGap
gridGap
isgap
gridRow
isrow
GridRowGap
isrowGap
gridTemplateAreas
istemplateAreas
gridTemplateColumns
istemplateColumns
gridTemplateRows
istemplateRows
Grid Item #
With the Grid.Item component use shorthand props:
gridArea
isarea
gridColumn
iscolumn
gridRow
isrow
Properties #
Grid #
Name | Type(s) | Default | Required |
---|---|---|---|
area | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} number & {} ThemeProp<GridArea, Theme> same as gridArea | ||
autoColumns | 0 "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} "max-content" "min-content" ThemeProp<GridAutoColumns<0 | (string & {})>, Theme> same as gridAutoColumns | ||
autoFlow | "row" "column" "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" string & {} "dense" ThemeProp<GridAutoFlow, Theme> same as gridAutoFlow | ||
autoRows | 0 "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} "max-content" "min-content" ThemeProp<GridAutoRows<0 | (string & {})>, Theme> same as gridAutoRows | ||
column | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} number & {} ThemeProp<GridColumn, Theme> same as gridColumn | ||
columnGap | string number true symbol {} string & {} ThemeProp<string | number | true | symbol | {} | (string & {}), Theme> same as columnGap | ||
gap | string number true symbol {} string & {} ThemeProp<string | number | true | symbol | {} | (string & {}), Theme> same as gridGap | ||
row | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} number & {} ThemeProp<GridRow, Theme> same as gridRow | ||
rowGap | string number true symbol {} string & {} ThemeProp<string | number | true | symbol | {} | (string & {}), Theme> same as gridRowGap | ||
templateAreas | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" string & {} "none" ThemeProp<GridTemplateAreas, Theme> same as gridTemplateAreas | ||
templateColumns | string number true symbol {} string & {} ThemeProp<string | number | true | symbol | {} | (string & {}), Theme> same as gridTemplateColumns | ||
templateRows | string number true symbol {} string & {} ThemeProp<string | number | true | symbol | {} | (string & {}), Theme> same as gridTemplateRows |
Grid.Item #
Name | Type(s) | Default | Required |
---|---|---|---|
area | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} number & {} ThemeProp<GridArea, Theme> same as gridArea | ||
column | "-moz-initial" "inherit" "initial" "revert" "revert-layer" "unset" "auto" string & {} number & {} ThemeProp<GridColumn, Theme> same as gridColumn | ||
row | true ThemeProp<true, Theme> same as gridRow |