Grid
Lays out children in a vertically + horizontally spaced layout. You normally use it with fixed size children as shown below:
Space
/**
* Minimum spacing between children
*/
$space?:
| CSSLength
| {
$v?: CSSLength,
$h?: CSSLength
}
Default vertical and horizontal space is 24px.
Example (vertical space=40px, horizontal space=10px):
Justify
/**
* Controls how the extra space around the children is handled
*/
$justify?:
/** Controls by child placement */
| 'start' /** default */
| 'center'
| 'end'
/** Controls by space */
| 'space-between'
| 'space-around'
We've seen the default
startalready (the extra space gets put on the right). Lets look at examples of the other options.
Example center (the extra space gets put around the children):
Example end (the extra space gets put at the left):
Example space-between (the extra space goes between items, items are pushed to the edges):
Example space-around (the extra space goes around items, each items gets a portion of the space left+right):
Scale
Grid supports the scale prop as explained in the scale principle.
DivProps
Grid supports all DivProps.
BaseProps
Grid supports all BaseProps.