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 "../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>
  );
}

#
Spanning columns

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

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>
  );
}