Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

Grid

Grid is a component for managing grid layouts. It also comes with handy style shorthand.

Source@yamada-ui/layouts

Import

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

The shorthand available for Grid is as follows:

  • templateColumns: This is a shorthand props for gridTemplateColumns.
  • templateRows: This is a shorthand props for gridTemplateRows.
  • templateAreas: This is a shorthand props for gridTemplateAreas.
  • column: This is a shorthand props for gridColumn.
  • row: This is a shorthand props for gridRow.
  • area: This is a shorthand props for gridArea.
  • autoFlow: This is a shorthand props for gridAutoFlow.
  • autoColumns: This is a shorthand props for gridAutoColumns.
  • autoRows: This is a shorthand props for gridAutoRows.

The shorthand available for GridItem is as follows:

  • area: This is a shorthand props for gridArea.
  • colStart: This is a shorthand props for gridColumnStart.
  • colEnd: This is a shorthand props for gridColumnEnd.
  • rowStart: This is a shorthand props for gridRowStart.
  • rowEnd: This is a shorthand props for gridRowEnd.

Usage

Editable example

<Grid templateColumns="repeat(4, 1fr)" gap="md">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <GridItem key={index} w="full" h="4xs" rounded="md" bg={bg} />
    )}
  </For>
</Grid>
Copied!

Using templateAreas

Editable example

<Grid
  templateAreas={`
    "one one two three"
    "four five two six"
    "four seven seven eight"
  `}
  gap="md"
>
  <For
    each={[
      { area: "one", bg: "primary" },
      { area: "two", bg: "secondary" },
      { area: "three", bg: "warning" },
      { area: "four", bg: "danger" },
      { area: "five", bg: "primary" },
      { area: "six", bg: "secondary" },
      { area: "seven", bg: "warning" },
      { area: "eight", bg: "danger" },
    ]}
  >
    {({ area, bg }, index) => (
      <GridItem
        key={index}
        area={area}
        w="full"
        minH="4xs"
        rounded="md"
        bg={bg}
      />
    )}
  </For>
</Grid>
Copied!

Spanning Multiple Columns and Rows

Editable example

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

Edit this page on GitHub

PreviousCenterNextSimpleGrid