Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Grid

Gridは、グリッドレイアウトを管理するためのコンポーネントです。また、便利なスタイルのショートハンドが用意されています。

ソース@yamada-ui/layouts

Props

GridProps

area

説明

The CSS grid-area property.

タイプ

"-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

説明

The CSS grid-auto-columns property.

タイプ

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

説明

The CSS grid-auto-flow property.

タイプ

"-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

説明

The CSS grid-auto-rows property.

タイプ

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

説明

The CSS grid-column property.

タイプ

"-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

説明

The CSS grid-row property.

タイプ

"-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

説明

The CSS grid-template-areas property.

タイプ

"-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

説明

The CSS grid-template-columns property.

タイプ

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

説明

The CSS grid-template-rows property.

タイプ

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

説明

The CSS grid-area property.

タイプ

"-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

説明

The CSS grid-column-end property.

タイプ

"-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

説明

The number of columns the grid item should span.

タイプ

UIValue<number>

colStart

説明

The CSS grid-column-start property.

タイプ

"-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

説明

The CSS grid-row-end property.

タイプ

"-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

説明

The number of rows the grid item should span.

タイプ

UIValue<number>

rowStart

説明

The CSS grid-row-start property.

タイプ

"-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<...

GitHubでこのページを編集する

前Center次SimpleGrid