ComponentsGrid

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.

01

02

03

04

05

06

07

import { Grid } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <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.

01

02

03

04

import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App({
  gap = "16",
}: Pick<ComponentPropsWithoutRef<typeof Grid>, "gap">) {
  return (
    <Canvas>
      <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.

01

02

03

04

05

06

07

import { Box, Grid } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Grid gridTemplateColumns="3">
        <Box>01</Box>
        <Box>02</Box>
        <Box>03</Box>
        <Box gridColumn="2">04</Box>
        <Box>05</Box>
        <Box>06</Box>
        <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