Grid

A CSS Grid layout component with responsive configuration and variant-based styling.

"use client"

import Grid from "@/components/ui/grid"

export function GridDemo() {
  return (
    <div className="w-full max-w-3xl p-8">
      <Grid cols={3} gap="md" colsMobile={2}>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">1</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">2</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">3</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">4</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">5</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">6</span>
        </div>
      </Grid>
    </div>
  )
}

Installation


pnpm dlx pitsi@latest add grid

Usage

import Grid from "@/components/ui/grid"

<Grid cols={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Examples

Basic Grid

"use client"

import Grid from "@/components/ui/grid"

export function GridDemo() {
  return (
    <div className="w-full max-w-3xl p-8">
      <Grid cols={3} gap="md" colsMobile={2}>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">1</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">2</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">3</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">4</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">5</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">6</span>
        </div>
      </Grid>
    </div>
  )
}

Two Column Layout

<Grid cols={2} gap="lg">
  <div>Left Column</div>
  <div>Right Column</div>
</Grid>

Responsive Grid

<Grid cols={4} colsMobile={2} gap="md" gapMobile="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

Custom Gap Spacing

<Grid cols={3} gapX="lg" gapY="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Centered Grid Items

<Grid cols={3} align="center" justify="center">
  <div>Centered Item 1</div>
  <div>Centered Item 2</div>
  <div>Centered Item 3</div>
</Grid>

Props

Grid

Prop	Type	Default	Description
`as`	`React.ElementType`	`"div"`	The element to render as
`cols`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12`	-	Number of columns
`rows`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	-	Number of rows
`flow`	`"row" \| "col" \| "dense" \| "row-dense" \| "col-dense"`	`"row"`	Grid auto flow
`gap`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"`	-	Gap between items
`gapX`	`gap`	-	Horizontal gap
`gapY`	`gap`	-	Vertical gap
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	`"start"`	Align items
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	`"start"`	Justify content
`colsMobile`	`cols`	-	Columns on mobile
`rowsMobile`	`rows`	-	Rows on mobile
`flowMobile`	`flow`	-	Flow on mobile
`gapMobile`	`gap`	-	Gap on mobile
`gapXMobile`	`gapX`	-	Horizontal gap on mobile
`gapYMobile`	`gapY`	-	Vertical gap on mobile
`alignMobile`	`align`	-	Align on mobile
`justifyMobile`	`justify`	-	Justify on mobile
`className`	`string`	-	Additional classes

Notes

The component uses the use-mobile hook to detect mobile screens and apply mobile-specific props.
All responsive props (ending with Mobile) will only apply when the viewport is considered mobile.
The component is polymorphic and can be rendered as any HTML element using the as prop.
You can combine gap with gapX or gapY for more granular control over spacing.

Form Hero Button

On This Page

Installation Usage Examples Basic Grid Two Column Layout Responsive Grid Custom Gap Spacing Centered Grid Items Props Grid Notes

"use client" import Grid from "@/components/ui/grid" export function GridDemo() { return ( <div className="w-full max-w-3xl p-8"> <Grid cols={3} gap="md" colsMobile={2}> <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm"> <span className="text-lg font-semibold">1</span> </div> <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm"> <span className="text-lg font-semibold">2</span> </div> <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm"> <span className="text-lg font-semibold">3</span> </div> <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm"> <span className="text-lg font-semibold">4</span> </div> <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm"> <span className="text-lg font-semibold">5</span> </div> <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm"> <span className="text-lg font-semibold">6</span> </div> </Grid> </div> ) }

Examples

Basic Grid

"use client"

import Grid from "@/components/ui/grid"

export function GridDemo() {
  return (
    <div className="w-full max-w-3xl p-8">
      <Grid cols={3} gap="md" colsMobile={2}>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">1</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">2</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">3</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">4</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">5</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">6</span>
        </div>
      </Grid>
    </div>
  )
}

Two Column Layout

<Grid cols={2} gap="lg">
  <div>Left Column</div>
  <div>Right Column</div>
</Grid>

Responsive Grid

<Grid cols={4} colsMobile={2} gap="md" gapMobile="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

Custom Gap Spacing

<Grid cols={3} gapX="lg" gapY="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Centered Grid Items

<Grid cols={3} align="center" justify="center">
  <div>Centered Item 1</div>
  <div>Centered Item 2</div>
  <div>Centered Item 3</div>
</Grid>

Props

Grid

Prop	Type	Default	Description
`as`	`React.ElementType`	`"div"`	The element to render as
`cols`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12`	-	Number of columns
`rows`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	-	Number of rows
`flow`	`"row" \| "col" \| "dense" \| "row-dense" \| "col-dense"`	`"row"`	Grid auto flow
`gap`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"`	-	Gap between items
`gapX`	`gap`	-	Horizontal gap
`gapY`	`gap`	-	Vertical gap
`align`	`"start" \| "center" \| "end" \| "stretch" \| "baseline"`	`"start"`	Align items
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	`"start"`	Justify content
`colsMobile`	`cols`	-	Columns on mobile
`rowsMobile`	`rows`	-	Rows on mobile
`flowMobile`	`flow`	-	Flow on mobile
`gapMobile`	`gap`	-	Gap on mobile
`gapXMobile`	`gapX`	-	Horizontal gap on mobile
`gapYMobile`	`gapY`	-	Vertical gap on mobile
`alignMobile`	`align`	-	Align on mobile
`justifyMobile`	`justify`	-	Justify on mobile
`className`	`string`	-	Additional classes

Notes

The component uses the use-mobile hook to detect mobile screens and apply mobile-specific props.

All responsive props (ending with Mobile) will only apply when the viewport is considered mobile.

The component is polymorphic and can be rendered as any HTML element using the as prop.

You can combine gap with gapX or gapY for more granular control over spacing.