Arrange
Gap
Behaves like grid-gap in css.
<Arrange gap="m">
<DemoBox padding="s"/>
<DemoBox padding="s"/>
<DemoBox padding="s"/>
</Arrange>
Columns
Behaves like grid-template-columns in css.
<>
<Arrange gap="m" columns="1fr 2fr">
<DemoBox padding="s"/>
<DemoBox padding="s"/>
</Arrange>
<br />
<Arrange gap="m" columns="repeat(2, 1fr)">
<DemoBox padding="s"/>
<DemoBox padding="s"/>
</Arrange>
</>
Rows
Behaves like grid-template-rows in css.
<Arrange gap="s" rows="4fr auto" height={20}>
<DemoBox padding="s" height="100%"/>
<DemoBox padding="s" height="100%"/>
</Arrange>
AutoFlow
Behaves like grid-auto-flow in css.
<Arrange gap="l" autoFlow="row">
<Arrange gap="s" autoFlow="column">
<DemoBox padding="s">1</DemoBox>
<DemoBox padding="s">2</DemoBox>
<DemoBox padding="s">3</DemoBox>
</Arrange>
<Arrange gap="s" autoFlow="row">
<DemoBox padding="s">1</DemoBox>
<DemoBox padding="s">2</DemoBox>
<DemoBox padding="s">3</DemoBox>
</Arrange>
</Arrange>
Playground
alignItems alignContent justifyContent justifyItems alignItems="center"
justifyContent="start"
autoFlow="column"
Props
Box
Includes all Box props.
Arrange
alignItemsRESPONSIVE
oneOfType
oneOf
'start' 'end' 'center' 'stretch' 'baseline'
object
'center'
justifyContentRESPONSIVE
oneOfType
oneOf
'start' 'end' 'center' 'stretch' 'baseline' 'space-around' 'space-between' 'space-evenly'
object
'start'
autoFlowRESPONSIVE
'column'
gapRESPONSIVE
oneOfType
oneOf
"xs" "s" "s2" "m" "l" "l2" "xl" "xl2" "xxl"
number
string
object
columnGapRESPONSIVE
oneOfType
oneOf
"xs" "s" "s2" "m" "l" "l2" "xl" "xl2" "xxl"
number
string
object
rowGapRESPONSIVE
oneOfType
oneOf
"xs" "s" "s2" "m" "l" "l2" "xl" "xl2" "xxl"
number
string
object
justifyItemsRESPONSIVE
oneOfType
oneOf
'start' 'end' 'center' 'stretch' 'baseline'
object
alignContentRESPONSIVE
oneOfType
oneOf
'start' 'end' 'center' 'stretch' 'baseline' 'space-around' 'space-between' 'space-evenly'
object