WUI logo

Grid

Box display set to grid with shorthand entries.

version

4.2.0

install

yarn add @welcome-ui/grid

usage

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

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 templateColumns="repeat(5, 1fr)" gap="md">
<Box backgroundColor="sub.1" w="100%" h={50} />
<Box backgroundColor="sub.3" w="100%" h={50} />
<Box backgroundColor="sub.4" w="100%" h={50} />
<Box backgroundColor="sub.5" w="100%" h={50} />
<Box backgroundColor="sub.2" w="100%" h={50} />
</Grid>

Grid Item #

With the Grid.Item component use shorthand props:

  • gridArea is area
  • gridColumn is column
  • gridRow is row

<Grid templateRows="repeat(2, 1fr)" templateColumns="repeat(4, 1fr)" gap="md" h={400}>
<Grid.Item area="span 2 / span 1 / span 2 / span 1" bg="sub.1" />
<Grid.Item column="span 2 / span 2" bg="sub.2" />
<Grid.Item column="span 1 / span 1" bg="sub.3" />
<Grid.Item column="span 3 / span 3" bg="sub.4" />
</Grid>

Properties #

Grid #
NameType(s)DefaultRequired
area
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
"auto"
string & {}
number & {}
ThemeProp<GridArea, Theme>

same as gridArea

autoColumns
0
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
"auto"
string & {}
"max-content"
"min-content"
ThemeProp<GridAutoColumns<0 | (string & {})>, Theme>

same as gridAutoColumns

autoFlow
"row"
"column"
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
string & {}
"dense"
ThemeProp<GridAutoFlow, Theme>

same as gridAutoFlow

autoRows
0
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
"auto"
string & {}
"max-content"
"min-content"
ThemeProp<GridAutoRows<0 | (string & {})>, Theme>

same as gridAutoRows

column
"-moz-initial"
"inherit"
"initial"
"revert"
"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"
"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"
"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 #
NameType(s)DefaultRequired
area
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
"auto"
string & {}
number & {}
ThemeProp<GridArea, Theme>

same as gridArea

column
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
"auto"
string & {}
number & {}
ThemeProp<GridColumn, Theme>

same as gridColumn

row
true
ThemeProp<true, Theme>

same as gridRow

Packages #

Dependencies #
Peer dependencies #

Previous

Flex