グリッド

グリッドレイアウトを作成するためのコンポーネントです。

ソースコードを見る問題を報告する

<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
</Grid>

APIリファレンス

このコンポーネントはdiv要素に基づいており、共通のマージンプロパティをサポートしています。

これらのプロパティを使用してグリッドレイアウトを作成します。

プロパティ	型	デフォルト値
`as`	`"div" \| "span"`	`"div"`
`asChild`	`boolean`	デフォルト値なし
`display`	`Responsive<"none" \| "inline-grid" \| "grid">`	デフォルト値なし
`areas`	`Responsive<string>`	デフォルト値なし
`columns`	`Responsive<enum \| string>`	デフォルト値なし
`rows`	`Responsive<enum \| string>`	デフォルト値なし
`flow`	`Responsive<enum>`	デフォルト値なし
`align`	`Responsive<enum>`	デフォルト値なし
`justify`	`Responsive<"start" \| "center" \| "end" \| "between">`	デフォルト値なし
`gap`	`Responsive<enum \| string>`	デフォルト値なし
`gapX`	`Responsive<enum \| string>`	デフォルト値なし
`gapY`	`Responsive<enum \| string>`	デフォルト値なし

以下のプロパティは、Box、Flex、Grid、Container、およびSectionコンポーネントで共有されています。レイアウトに関するコンポーネントの詳細については、レイアウトに関するセクションを参照してください。

プロパティ	型	デフォルト値
`p`	`Responsive<enum \| string>`	デフォルト値なし
`px`	`Responsive<enum \| string>`	デフォルト値なし
`py`	`Responsive<enum \| string>`	デフォルト値なし
`pt`	`Responsive<enum \| string>`	デフォルト値なし
`pr`	`Responsive<enum \| string>`	デフォルト値なし
`pb`	`Responsive<enum \| string>`	デフォルト値なし
`pl`	`Responsive<enum \| string>`	デフォルト値なし
`width`	`Responsive<string>`	デフォルト値なし
`minWidth`	`Responsive<string>`	デフォルト値なし
`maxWidth`	`Responsive<string>`	デフォルト値なし
`height`	`Responsive<string>`	デフォルト値なし
`minHeight`	`Responsive<string>`	デフォルト値なし
`maxHeight`	`Responsive<string>`	デフォルト値なし
`position`	`Responsive<enum>`	デフォルト値なし
`inset`	`Responsive<enum \| string>`	デフォルト値なし
`top`	`Responsive<enum \| string>`	デフォルト値なし
`right`	`Responsive<enum \| string>`	デフォルト値なし
`bottom`	`Responsive<enum \| string>`	デフォルト値なし
`left`	`Responsive<enum \| string>`	デフォルト値なし
`overflow`	`Responsive<enum>`	デフォルト値なし
`overflowX`	`Responsive<enum>`	デフォルト値なし
`overflowY`	`Responsive<enum>`	デフォルト値なし
`flexBasis`	`Responsive<string>`	デフォルト値なし
`flexShrink`	`Responsive<enum \| string>`	デフォルト値なし
`flexGrow`	`Responsive<enum \| string>`	デフォルト値なし
`gridArea`	`Responsive<string>`	デフォルト値なし
`gridColumn`	`Responsive<string>`	デフォルト値なし
`gridColumnStart`	`Responsive<string>`	デフォルト値なし
`gridColumnEnd`	`Responsive<string>`	デフォルト値なし
`gridRow`	`Responsive<string>`	デフォルト値なし
`gridRowStart`	`Responsive<string>`	デフォルト値なし
`gridRowEnd`	`Responsive<string>`	デフォルト値なし

例

レスポンシブ

Responsiveとマークされているすべてのプロパティ（columnsやrowsなど）は、ブレークポイントオブジェクトを受け入れます。たとえば、次のグリッドは1列から始まり、ミディアムブレークポイントから2列を使用します。

<Grid columns={{ initial: '1', md: '2' }} gap="3" width="auto">
  <Box height="64px">
    <DecorativeBox />
  </Box>
  <Box height="64px">
    <DecorativeBox />
  </Box>
</Grid>

前へFlex

次へContainer

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

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

グリッド

APIリファレンス

例

レスポンシブ