Grid

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

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

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