Grid

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

#
Documentation

#
Usage

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


import { Grid } from "@optiaxiom/react";
 
import { Canvas } from "@/demos/Canvas";
 
export function App() {
  return (
    <Canvas asChild>
      <Grid gridTemplateColumns="3">
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
        <div>07</div>
      </Grid>
    </Canvas>
  );
}

#
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";
 
import { Canvas } from "@/demos/Canvas";
 
export function App({
  gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Grid>, "gap">) {
  return (
    <Canvas asChild>
      <Grid gap={gap} gridTemplateColumns="2">
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
        <Box>04</Box>
      </Grid>
    </Canvas>
  );
}

#
Spanning columns

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


import { Box, Grid } from "@optiaxiom/react";
 
import { Canvas } from "@/demos/Canvas";
 
export function App() {
  return (
    <Canvas asChild>
      <Grid gridTemplateColumns="3">
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <Box gridColumn="2">04</Box>
        <div>05</div>
        <div>06</div>
        <Box gridColumn="2">07</Box>
      </Grid>
    </Canvas>
  );
}

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

#
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`
`className` `string`

#
Changelog

#
0.1.0

Added component