Layout primitivesGrid

Grid.

Grid declares a column count once and lets it change per breakpoint. It replaces hand-written grid-cols chains with a typed, responsive prop.

TypeScriptRenders div.gridAccepts native props

When to reach for it

Usage

Grid is a thin wrapper over Tailwind utilities, so it costs nothing at runtime and composes with every other primitive.

  • Stat tiles, card galleries, and anything with equal-width cells.
  • Dashboards where the column count depends on the viewport.
  • Form layouts with two or three fields per line on wide screens.
Import
import { Grid } from "@/components/ui/grid";

In practice

Examples

Each example is a real composition with shadcn components. Switch to the Code tab for the source, or copy it directly.

Stat tiles

One column on phones, two on tablets, four on desktops. Resize the window to watch the map apply.

Revenue+12.4%
$48,920
Active users+3.1%
3,214
Conversion+0.6%
4.8%
Churn−0.3%
1.2%

Two-column form

Fields share a line from the md breakpoint. Below it they stack without any extra markup.

Columns and gap

Switch between fixed counts and a responsive map.

Playground
01
02
03
04
05
06
07
08
Cols
Gap

Reference

Props

Every primitive also accepts the native props of its element, including className, children, ref, and data attributes.

PropTypeDefault
cols

A column count, or a breakpoint map of column counts.

Responsive<1 | 2 | 3 | 4 | 5 | 6 | 12>1
gap

Space between rows and columns.

Responsive<0 | 1 | 2 | 3 | 4 | 6 | 8 | 12>4
align

Vertical alignment of items within their row.

Responsive<"start" | "center" | "end" | "stretch" | "baseline">"stretch"

Good to know

Notes

  • Responsive props take a single value or a map of base, sm, md, lg, xl, and 2xl. Breakpoints use Tailwind defaults: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.
  • Every class in the responsive maps is written out in the component source, so Tailwind always generates it.