Grid
The Grid component can be used to layout its children with the help of CSS
Grid. The component can be customized with CSS grid props.
More information about CSS Grid.
GridProps
Signature:
export declare type GridProps<E extends > = <E, >;GridOwnProps
Signature:
export declare type GridOwnProps = & & & & ;GridFlexPositionProps
| Name | Type | Default | Description |
|---|---|---|---|
justifySelf? | - | justify self positions | |
alignSelf? | - | align self positions | |
placeSelf? | - | place self positions | |
justifyItems? | - | justify items positions | |
alignItems? | - | align items positions | |
placeItems? | - | place items positions | |
justifyContent? | - | justify content positions | |
alignContent? | - | align content positions | |
placeContent? | - | place content positions |
GapProps
| Name | Type | Default | Description |
|---|---|---|---|
gap? | - | Defines gap | |
rowGap? | - | Defines row gap | |
columnGap? | - | Defines column gap |
LayoutSizeProps
| Name | Type | Default | Description |
|---|---|---|---|
width? | [] | - | CSS width property |
minWidth? | [] | - | CSS min width property |
maxWidth? | [] | - | CSS max width property |
height? | [] | - | CSS height property |
minHeight? | [] | - | CSS min height property |
maxHeight? | [] | - | CSS max height property |
SpacingProps
| Name | Type | Default | Description |
|---|---|---|---|
padding? | - | Defines CSS padding property | |
p? | - | Defines CSS padding property | |
paddingX? | - | Defines CSS x padding property | |
px? | - | Defines CSS x padding property | |
paddingY? | - | Defines CSS y padding property | |
py? | - | Defines CSS y padding property | |
paddingTop? | - | Defines CSS top padding property | |
pt? | - | Defines CSS top padding property | |
paddingRight? | - | Defines CSS right padding property | |
pr? | - | Defines CSS right padding property | |
paddingBottom? | - | Defines CSS bottom padding property | |
pb? | - | Defines CSS bottom padding property | |
paddingLeft? | - | Defines CSS left padding property | |
pl? | - | Defines CSS left padding property | |
margin? | - | Defines CSS margin property | |
m? | - | Defines CSS margin property | |
marginX? | - | Defines CSS x margin property | |
mx? | - | Defines CSS x margin property | |
marginY? | - | Defines CSS y margin property | |
my? | - | Definesy CSS margin property | |
marginTop? | - | Defines CSS top margin property | |
mt? | - | Defines CSS top margin property | |
marginRight? | - | Defines CSS right margin property | |
mr? | - | Defines CSS right margin property | |
marginBottom? | - | Defines CSS bottom margin property | |
mb? | - | Defines bottom margin property | |
marginLeft? | - | Defines CSS left margin property | |
ml? | - | Defines CSS left margin property |
GridItemStyleProps
| Name | Type | Default | Description |
|---|---|---|---|
gridItem? | - | Determines whether this is a grid item. If true, display: 'grid' style will not be added. |
GridStyleProps
, , , , | Name | Type | Default | Description |
|---|---|---|---|
order? | .[] | - | Defines order |
flexGrow? | .[] | - | Defines flex grow |
flexShrink? | .[] | - | Defines flex shrink |
flexBasis? | .[] | - | Defines flex basis |
flex? | .[] | - | Defines flex |
gridTemplateColumns? | .[] | - | Defines grid template columns |
gridTemplateRows? | .[] | - | Defines grid template rows |
gridTemplateAreas? | .[] | - | Defines grid template areas |
gridTemplate? | .[] | - | Defines grid template |
gridAutoColumns? | .[] | - | Defines grid auto columns |
gridAutoRows? | .[] | - | Defines grid auto rows |
gridAutoFlow? | .[] | - | Defines grid auto flow |
grid? | .[] | - | Defines grid |
gridColumnStart? | .[] | - | Defines grid column start |
gridColumnEnd? | .[] | - | Defines grid column end |
gridRowStart? | .[] | - | Defines grid row start |
gridRowEnd? | .[] | - | Defines grid row end |
gridColumn? | .[] | - | Defines grid column |
gridRow? | .[] | - | Defines grid row |
gridArea? | .[] | - | Defines grid area |