Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

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

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridArea | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

autoColumns

Description

The CSS grid-auto-columns property.

Type

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

autoFlow

Description

The CSS grid-auto-flow property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "row" | "dense" | Partial<Record<Breakpoint, GridAutoFlow | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

autoRows

Description

The CSS grid-auto-rows property.

Type

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

column

Description

The CSS grid-column property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridColumn | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

row

Description

The CSS grid-row property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridRow | [GridRow, GridRow]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

templateAreas

Description

The CSS grid-template-areas property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | Partial<Record<Breakpoint, GridTemplateAreas | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

templateColumns

Description

The CSS grid-template-columns property.

Type

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

templateRows

Description

The CSS grid-template-rows property.

Type

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

GridItemProps

area

Description

The CSS grid-area property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridArea | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

colEnd

Description

The CSS grid-column-end property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridColumnEnd | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

colSpan

Description

The number of columns the grid item should span.

Type

UIValue<number>

colStart

Description

The CSS grid-column-start property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridColumnStart | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

rowEnd

Description

The CSS grid-row-end property.

Type

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridRowEnd | [...]>> | [...] | Partial<...> | [...] | ((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

(string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | (number & {}) | Partial<Record<Breakpoint, GridRowStart | [...]>> | [...] | Partial<...> | [...] | ((theme: StyledTheme) => UIValue<...>)

Edit this page on GitHub

PreviousCenterNextSimpleGrid