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

01
02
03
04
05
06
07
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.avatar.purple" gridColumn="2">
        04
      </DemoBox>
      <DemoBox>05</DemoBox>
      <DemoBox>06</DemoBox>
      <DemoBox bg="bg.avatar.purple" 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>
  );
}

#

Responsive

import type { ComponentPropsWithoutRef } from "react";
 
import { Box, Grid } from "@optiaxiom/react";
 
export function App() {
  return (
    <Grid gridTemplateColumns="3" w="full">
      <DemoBox bg="bg.avatar.purple" gridColumn={["3", "2"]}>
        01
      </DemoBox>
      <DemoBox>02</DemoBox>
      <DemoBox>03</DemoBox>
      <DemoBox bg="bg.avatar.purple" gridColumn={["1", "2"]}>
        04
      </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>
  );
}
Last updated on
GapGrid Template Columns