Grid

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Grid, GridItem } from "@tessinaui/ui";

{/* Fixed 3-column grid */}
<Grid cols={3} gap="md">
  <Card>One</Card>
  <Card>Two</Card>
  <Card>Three</Card>
</Grid>

{/* Responsive columns */}
<Grid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} gap="sm">
  {items.map((item) => <Card key={item.id}>{item.title}</Card>)}
</Grid>

{/* Cell placement with GridItem */}
<Grid cols={4} rows={3} gap="sm">
  <GridItem colSpan={2} rowSpan={2}>
    <Card>Featured</Card>
  </GridItem>
  <Card>1</Card>
  <Card>2</Card>
  <Card>3</Card>
  <Card>4</Card>
</Grid>

{/* Explicit line placement */}
<Grid cols={6}>
  <GridItem colStart={2} colEnd={5}>
    <Hero />
  </GridItem>
</Grid>

{/* Dense flow backfills gaps */}
<Grid cols={4} flow="dense" gap="sm">
  <GridItem colSpan={2}>Wide</GridItem>
  <Card>Auto</Card>
  <Card>Auto</Card>
</Grid>

Showcase

Columns

Pass a number for a fixed count, or a breakpoint object for responsive layouts.

<Grid cols={3}>…</Grid>
<Grid cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 6 }}>…</Grid>

Supported column counts: 1 through 12. Supported breakpoints: base, sm, md, lg, xl.

Rows

Explicit row counts are usually only needed when using rowSpan or rowStart/rowEnd.

Gap

Seven presets that map to Tailwind's spacing scale.

For independent axis control use rowGap and columnGap — they accept the same seven values and override gap on their respective axis.

Flow

Controls how auto-placed items fill the grid.

Alignment

Inline

inline={true} swaps grid for inline-grid so the container flows alongside surrounding inline content.

Polymorphic render

Clone a semantic element while keeping Grid styling.

<Grid render={<ul aria-label="Tiles" />} cols={3} gap="md">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</Grid>

GridItem

Per-cell placement and alignment helpers. GridItem is optional — you can always apply col-span-* / row-span-* directly with className.

colSpan / rowSpan

colStart / colEnd / rowStart / rowEnd

Explicit grid-line placement. Start values accept "auto" or 1–13. End values accept "auto" or 1–13.

<GridItem colStart={2} colEnd={5}>…</GridItem>

alignSelf / justifySelf

Per-cell override of the parent's alignItems / justifyItems.

<GridItem alignSelf="end" justifySelf="center">…</GridItem>

RTL

dir="rtl" is forwarded to the DOM node. In RTL, columns are laid out right-to-left, mirroring the logical column order.

Accessibility

• Grid is a structural primitive — it applies no ARIA roles.
• Use render to mount semantic HTML (<ul>, <section>, <main>) when the grouping has meaning.
• Reordering via colStart/rowStart separates visual order from DOM order. Keep DOM order logical — screen readers and keyboard navigation follow source order, not visual order.

When to use Grid vs. Flex

API Reference

Grid Props

GridItem Props

Notes

• No intrinsic padding. Grid only controls layout — add padding, borders, background via className.
• No SSR caveats. Grid is a pure wrapper with no hooks; safe to render server-side.
• Static class names. All CSS class names are resolved at compile time — Tailwind's JIT sees them.
• Arbitrary values. If you need something outside the presets (e.g. cols={18}, gap="7"), drop to className="grid-cols-[18] gap-[28px]".