Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Grid

Grid is a component for managing grid layouts. It also comes with handy style shorthand.

Source@yamada-ui/layouts

Props

GridProps

area

Description

The CSS grid-area property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridArea | { [x: string]: GridArea | undefined; ... 5 more ...; xl?: GridArea | undefined; }, GridArea | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...>)

autoColumns

Description

The CSS grid-auto-columns property.

Type

number | "px" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | "0.5" | ... 68 more ... | ((theme: StyledTheme) => UIValue<...>)

autoFlow

Description

The CSS grid-auto-flow property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "column" | "row" | "dense" | [GridAutoFlow | { [x: string]: GridAutoFlow | undefined; ... 5 more ...; xl?: GridAutoFlow | undefined; }, GridAutoFlow | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIVa...

autoRows

Description

The CSS grid-auto-rows property.

Type

number | "px" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | "0.5" | ... 68 more ... | ((theme: StyledTheme) => UIValue<...>)

column

Description

The CSS grid-column property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridColumn | { [x: string]: GridColumn | undefined; ... 5 more ...; xl?: GridColumn | undefined; }, GridColumn | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...>)

row

Description

The CSS grid-row property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridRow | { [x: string]: GridRow | undefined; ... 5 more ...; xl?: GridRow | undefined; }, GridRow | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...>)

templateAreas

Description

The CSS grid-template-areas property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "none" | [GridTemplateAreas | { [x: string]: GridTemplateAreas | undefined; ... 5 more ...; xl?: GridTemplateAreas | undefined; }, GridTemplateAreas | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIVa...

templateColumns

Description

The CSS grid-template-columns property.

Type

number | "px" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | "0.5" | ... 70 more ... | ((theme: StyledTheme) => UIValue<...>)

templateRows

Description

The CSS grid-template-rows property.

Type

number | "px" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | "0.5" | ... 70 more ... | ((theme: StyledTheme) => UIValue<...>)

GridItemProps

area

Description

The CSS grid-area property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridArea | { [x: string]: GridArea | undefined; ... 5 more ...; xl?: GridArea | undefined; }, GridArea | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...>)

colEnd

Description

The CSS grid-column-end property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridColumnEnd | { [x: string]: GridColumnEnd | undefined; ... 5 more ...; xl?: GridColumnEnd | undefined; }, GridColumnEnd | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIVa...

colSpan

Description

The number of columns the grid item should span.

Type

UIValue<number>

colStart

Description

The CSS grid-column-start property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridColumnStart | { [x: string]: GridColumnStart | undefined; ... 5 more ...; xl?: GridColumnStart | undefined; }, GridColumnStart | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme)...

rowEnd

Description

The CSS grid-row-end property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridRowEnd | { [x: string]: GridRowEnd | undefined; ... 5 more ...; xl?: GridRowEnd | undefined; }, GridRowEnd | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...>)

rowSpan

Description

The number of rows the grid item should span.

Type

UIValue<number>

rowStart

Description

The CSS grid-row-start property.

Type

"-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (string & {}) | (number & {}) | [GridRowStart | { [x: string]: GridRowStart | undefined; ... 5 more ...; xl?: GridRowStart | undefined; }, GridRowStart | { ...; }] | { ...; } | [...] | { ...; } | ((theme: StyledTheme) => UIValue<...

Edit this page on GitHub

PreviousCenterNextSimpleGrid