Skip to Content
StylingGrid Column

Grid Column

Use gridColumn prop to control how elements are sized across grid columns.

Name

Styles

1
2
3
4

#

Documentation

#

Usage

01

02

03

04

05

06

07

import { Canvas } from "@/demos/Canvas";
import { Box, Grid } from "@optiaxiom/react";
 
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>
  );
}

#

Responsive

import { Canvas } from "@/demos/Canvas";
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Canvas asChild>
      <Grid gridTemplateColumns="3">
        <Box gridColumn={["3", "2"]}>01</Box>
        <div>02</div>
        <div>03</div>
        <Box gridColumn={["1", "2"]}>04</Box>
      </Grid>
    </Canvas>
  );
}
Last updated on
GapJustify Content