Grid

A responsive grid layout builder using CSS Grid properties and Tailwind utilities.

Grid 1

Grid 2

Grid 3

Grid 4

Grid 5

Grid 6

default.tsx

1'use client';
2
3import React from 'react';
4import { Grid } from '../../layout/grid';
5
6export function Default() {
7  return (
8    <Grid columns="3" gap="4" className="border-border bg-card w-full rounded-xl border p-4">
9      <div className="bg-primary/20 text-primary border-primary/30 flex h-24 items-center justify-center rounded-lg border font-medium">
10        Grid 1
11      </div>
12      <div className="bg-secondary/20 text-secondary-foreground border-border flex h-24 items-center justify-center rounded-lg border font-medium">
13        Grid 2
14      </div>
15      <div className="bg-muted text-muted-foreground border-border flex h-24 items-center justify-center rounded-lg border font-medium">
16        Grid 3
17      </div>
18      <div className="bg-card border-border text-card-foreground flex h-24 items-center justify-center rounded-lg border font-medium">
19        Grid 4
20      </div>
21      <div className="bg-primary/10 border-primary/20 text-primary flex h-24 items-center justify-center rounded-lg border font-medium">
22        Grid 5
23      </div>
24      <div className="bg-secondary/10 border-secondary/20 text-secondary-foreground flex h-24 items-center justify-center rounded-lg border font-medium">
25        Grid 6
26      </div>
27    </Grid>
28  );
29}

Installation

pnpm dlx nachui add grid

Anatomy

1import { Grid } from '@/components/ui/grid';

1<Grid columns="3" gap="4">
2  <div>Column 1</div>
3  <div>Column 2</div>
4  <div>Column 3</div>
5</Grid>

API Reference

Grid

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element type to render the component as
`columns`	`'1' \| '2' \| ... \| '12' \| 'none' \| 'subgrid'`	`'1'`	Number of columns in the grid
`rows`	`'1' \| '2' \| ... \| '6' \| 'none' \| 'subgrid'`	-	Number of rows in the grid
`flow`	`'row' \| 'col' \| 'dense' \| 'row-dense' \| 'col-dense'`	-	Grid layout flows
`align`	`'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'`	-	Align children along block axis
`justify`	`'start' \| 'center' \| 'end' \| 'stretch'`	-	Justify children along inline axis
`gap`	`'0' \| '1' \| ... \| '32'`	-	Spacing between items on both axes
`gapX`	`'0' \| '1' \| ... \| '32'`	-	Spacing between columns
`gapY`	`'0' \| '1' \| ... \| '32'`	-	Spacing between rows
`className`	`string`	-	Custom CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousStack

NextContainer