Grid

import { Grid, Center, Text } from "astralis-ui";

export function GridDemo() {
  return (
    <Grid columns="3" gap="3" w="full" maxW="md">
      {[1, 2, 3, 4, 5, 6].map((n) => (
        <Center key={n} bg="brand-subtle" p="4" rounded="lg">
          <Text size="sm">{n}</Text>
        </Center>
      ))}
    </Grid>
  );
}

"use client";

import { Grid, Center, Text } from "astralis-ui";

export function GridSpan() {
  return (
    <Grid columns="4" rows="2" gap="3" w="full" maxW="md">
      <Grid.Item colSpan="2" rowSpan="2">
        <Center bg="orange-solid" rounded="lg" size="full" minH="24">
          <Text size="sm" color="inverted">2 × 2</Text>
        </Center>
      </Grid.Item>
      <Grid.Item colSpan="2">
        <Center bg="orange-muted" rounded="lg" p="4">
          <Text size="sm">2 × 1</Text>
        </Center>
      </Grid.Item>
      <Center bg="orange-subtle" rounded="lg" p="4">
        <Text size="sm">1</Text>
      </Center>
      <Center bg="orange-subtle" rounded="lg" p="4">
        <Text size="sm">1</Text>
      </Center>
    </Grid>
  );
}

import { Grid, Center, Text } from "astralis-ui";

export function GridResponsive() {
  return (
    /* 1 column on mobile, 2 from md, 3 from lg. */
    <Grid columns={{ base: "1", md: "2", lg: "3" }} gap="3" w="full" maxW="md">
      {["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn"].map((planet) => (
        <Center key={planet} bg="blue-subtle" p="4" rounded="lg">
          <Text size="sm">{planet}</Text>
        </Center>
      ))}
    </Grid>
  );
}

"use client";

import { Grid, Center, Text } from "astralis-ui";

export function GridTemplate() {
  return (
    /* templateAreas + Grid.Item area — the escape hatch for named layouts. */
    <Grid
      templateAreas={`"header header" "sidebar main" "footer footer"`}
      templateColumns="8rem 1fr"
      gap="3"
      w="full"
      maxW="md"
    >
      <Grid.Item area="header">
        <Center bg="green-solid" p="3" rounded="lg">
          <Text size="xs" color="inverted">header</Text>
        </Center>
      </Grid.Item>
      <Grid.Item area="sidebar">
        <Center bg="green-muted" p="3" rounded="lg" size="full" minH="20">
          <Text size="xs">sidebar</Text>
        </Center>
      </Grid.Item>
      <Grid.Item area="main">
        <Center bg="green-subtle" p="3" rounded="lg" size="full">
          <Text size="xs">main</Text>
        </Center>
      </Grid.Item>
      <Grid.Item area="footer">
        <Center bg="green-muted" p="3" rounded="lg">
          <Text size="xs">footer</Text>
        </Center>
      </Grid.Item>
    </Grid>
  );
}