Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.3

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

UIValue<GridArea>

autoColumns

Description

The CSS grid-auto-columns property.

Type

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

autoFlow

Description

The CSS grid-auto-flow property.

Type

UIValue<GridAutoFlow>

autoRows

Description

The CSS grid-auto-rows property.

Type

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

column

Description

The CSS grid-column property.

Type

UIValue<GridColumn>

row

Description

The CSS grid-row property.

Type

UIValue<GridRow>

templateAreas

Description

The CSS grid-template-areas property.

Type

UIValue<GridTemplateAreas>

templateColumns

Description

The CSS grid-template-columns property.

Type

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

templateRows

Description

The CSS grid-template-rows property.

Type

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

GridItemProps

area

Description

The CSS grid-area property.

Type

UIValue<GridArea>

colEnd

Description

The CSS grid-column-end property.

Type

UIValue<GridColumnEnd>

colSpan

Description

The number of columns the grid item should span.

Type

UIValue<number>

colStart

Description

The CSS grid-column-start property.

Type

UIValue<GridColumnStart>

rowEnd

Description

The CSS grid-row-end property.

Type

UIValue<GridRowEnd>

rowSpan

Description

The number of rows the grid item should span.

Type

UIValue<number>

rowStart

Description

The CSS grid-row-start property.

Type

UIValue<GridRowStart>

Edit this page on GitHub

PreviousCenterNextSimpleGrid