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.

OverviewProperties

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

extends, , , ,

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