Grid

A responsive CSS grid layout container. Five breakpoint-aware sizes map to standard column counts (4, 8, or 12) with horizontal margins.

Overview

Grid provides a CSS display: grid container with a predefined column count and gap based on the size prop. It is not a full responsive grid system — it sets the container's column count for a given viewport range. Use GridItem inside Grid to place items across those columns.

Import

import { Grid } from '@unflow.io/ui/components/Grid';
import { GridItem } from '@unflow.io/ui/components/GridItem';

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'xs'`	Column count variant

GridItem

GridItem has no dedicated span props — it forwards all standard HTMLDivElement props and defaults to col-span-1 row-span-1. Extend its span with Tailwind's col-span-*/row-span-* utilities via className. See GridItem for details.

Column layout

col-span-4

col-span-6

col-span-12 (full width)

<Grid size="md">
  <GridItem className="col-span-4">A</GridItem>
  <GridItem className="col-span-4">B</GridItem>
  <GridItem className="col-span-4">C</GridItem>
  <GridItem className="col-span-6">Left half</GridItem>
  <GridItem className="col-span-6">Right half</GridItem>
  <GridItem className="col-span-12">Full width</GridItem>
</Grid>

Size variants

size="xs" — 4 columns

size="md" — 12 columns

Size	Columns	Use case
`xs`	4	Mobile — narrow single-column layouts
`sm`	8	Small tablet — 2-column layouts
`md`	12	Desktop default — standard 12-column grid
`lg`	12	Large desktop — same columns, wider margins
`xl`	12	Extra-wide — same columns, maximum margins

Notes

Grid uses display: grid with grid-template-columns: repeat(N, 1fr) where N is determined by size.
GridItem spans are set via Tailwind's col-span-*/row-span-* utility classes on className, not a dedicated prop.
Customization is via className only — no prop API beyond size on Grid.
The grid doesn't automatically switch column counts at breakpoints — use separate Grid components inside responsive containers for adaptive layouts.

Accessibility

Grid is a layout primitive — it has no semantic role beyond the <div> it renders. Ensure the content order in source matches the visual reading order, as CSS grid can reorder items visually without changing DOM order (which affects screen readers).

Grid

On this page