Skip to Content
StylingGrid Template Columns

Grid Template Columns

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

Name

Styles

1
2
3
4

#

Documentation

#

Usage

01

02

03

04

05

06

07

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

#

Responsive

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