Grid

Use Grid component to place items in a grid using equal width columns.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Use gridTemplateColumns prop to create equally sized columns in a grid layout.


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gridTemplateColumns="3" w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
      <DemoBox>04</DemoBox>
      <DemoBox>05</DemoBox>
      <DemoBox>06</DemoBox>
      <DemoBox>07</DemoBox>
    </Grid>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.warning.light"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Gap

Use gap prop to control the gap between grid items.

Gap


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
export function App({
  gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Grid>, "gap">) {
  return (
    <Grid gap={gap} gridTemplateColumns="2" w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
      <DemoBox>04</DemoBox>
    </Grid>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.warning.light"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Spanning columns

Use the gridColumn prop on children to make them span across multiple columns.


import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gridTemplateColumns="3" w="full">
      <DemoBox>01</DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
      <DemoBox bg="bg.warning.light" gridColumn="2">
        04
      </DemoBox>
      <DemoBox>05</DemoBox>
      <DemoBox>06</DemoBox>
      <DemoBox bg="bg.warning.light" gridColumn="2">
        07
      </DemoBox>
    </Grid>
  );
}
 
function DemoBox({ children, ...props }: ComponentPropsWithoutRef<typeof Box>) {
  return (
    <Box
      bg="bg.avatar.neutral"
      display="grid"
      fontFamily="mono"
      fontSize="md"
      fontWeight="600"
      p="16"
      placeItems="center"
      rounded="sm"
      {...props}
    >
      {children}
    </Box>
  );
}

#
Related

Box

Box is the base component for all our other components and provides a convenient way to use our design tokens and set element styles without having to write any custom CSS.

Flex

Use Flex component to stack items vertically or horizontally.

Group

A flexbox layout component for grouping items horizontally or vertically.

#
Props

#
Grid

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`display` Set the element’s `display` CSS property `ResponsiveValue<typeof styling.display>` Default: `grid`
`gap` Set the element’s `gap` CSS property `ResponsiveValue<typeof styling.gap>` Default: `16`
`gridTemplateColumns` Control number of columns in a grid layout (`grid-template-columns`). The value is the number of equal columns, e.g. `2` creates two equal columns (`repeat(2, minmax(0, 1fr))`) — use this instead of a raw `style={{ gridTemplateColumns: "1fr 1fr" }}`. `ResponsiveValue<"2" \| "1" \| "3" \| "4">` Default: `1`

#
Changelog

#
0.1.0

Added component