Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Grid

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

ソース@yamada-ui/layouts

インポート

import { Grid, GridItem } from "@yamada-ui/react"
Copied!

Gridに用意されているショートハンドは下記の通りです。

  • templateColumns: gridTemplateColumnsを短縮したpropsです。
  • templateRows: gridTemplateRowsを短縮したpropsです。
  • templateAreas: gridTemplateAreasを短縮したpropsです。
  • column: gridColumnを短縮したpropsです。
  • row: gridRowを短縮したpropsです。
  • area: gridAreaを短縮したpropsです。
  • autoFlow: gridAutoFlowを短縮したpropsです。
  • autoColumns: gridAutoColumnsを短縮したpropsです。
  • autoRows: gridAutoRowsを短縮したpropsです。

GridItemに用意されているショートハンドは下記の通りです。

  • area: gridAreaを短縮したpropsです。
  • colStart: gridColumnStartを短縮したpropsです。
  • colEnd: gridColumnEndを短縮したpropsです。
  • rowStart: gridRowStartを短縮したpropsです。
  • rowEnd: gridRowEndを短縮したpropsです。

使い方

編集可能な例

<Grid templateColumns="repeat(4, 1fr)" gap="md">
  <GridItem w="full" h="4xs" rounded="md" bg="primary" />
  <GridItem w="full" h="4xs" rounded="md" bg="secondary" />
  <GridItem w="full" h="4xs" rounded="md" bg="warning" />
  <GridItem w="full" h="4xs" rounded="md" bg="danger" />
</Grid>
Copied!

templateAreasを使う

編集可能な例

<Grid
  templateAreas={`
    "one one two three"
    "four five two six"
    "four seven seven eight"
  `}
  gap="md"
>
  <GridItem area="one" w="full" minH="4xs" rounded="md" bg="primary" />
  <GridItem area="two" w="full" minH="4xs" rounded="md" bg="secondary" />
  <GridItem area="three" w="full" minH="4xs" rounded="md" bg="warning" />
  <GridItem area="four" w="full" minH="4xs" rounded="md" bg="danger" />
  <GridItem area="five" w="full" minH="4xs" rounded="md" bg="primary" />
  <GridItem area="six" w="full" minH="4xs" rounded="md" bg="secondary" />
  <GridItem area="seven" w="full" minH="4xs" rounded="md" bg="warning" />
  <GridItem area="eight" w="full" minH="4xs" rounded="md" bg="danger" />
</Grid>
Copied!

複数の列と行をまたがる

編集可能な例

<Grid
  w="full"
  templateColumns="repeat(4, 1fr)"
  templateRows="repeat(3, 1fr)"
  gap="md"
>
  <GridItem colSpan={2} w="full" minH="4xs" rounded="md" bg="primary" />

  <GridItem
    colSpan={2}
    rowSpan={3}
    w="full"
    minH="4xs"
    rounded="md"
    bg="secondary"
  />

  <GridItem
    rowStart={2}
    rowEnd={4}
    w="full"
    minH="4xs"
    rounded="md"
    bg="warning"
  />

  <GridItem
    colStart={2}
    colEnd={3}
    rowStart={2}
    rowEnd={4}
    w="full"
    minH="4xs"
    rounded="md"
    bg="danger"
  />
</Grid>
Copied!

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

前Center次SimpleGrid