Grid

Box display set to grid with shorthand entries.

version

5.0.0-alpha.32

install

yarn add @welcome-ui/grid

usage

import { Grid } from '@welcome-ui/grid'

View package View source

Usage #

With the Grid component use shorthand props:

gridArea is area
gridAutoColumns is autoColumns
gridAutoFlow is autoFlow
gridAutoRows is autoRows
gridColumn is column
columnGap is columnGap
gridGap is gap
gridRow is row
GridRowGap is rowGap
gridTemplateAreas is templateAreas
gridTemplateColumns is templateColumns
gridTemplateRows is templateRows

Grid Item #

With the Grid.Item component use shorthand props:

gridArea is area
gridColumn is column
gridRow is row

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

Packages #

Dependencies #

@welcome-ui/box [^5.0.0-alpha.32]

@welcome-ui/system [^5.0.0-alpha.32]

Peer dependencies #

@xstyled/styled-components [^3.7.3]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.9]

Previous

Next