GridItem

Overview

GridItem is the companion component to Grid. It renders a <div> that participates in the parent CSS grid. By default it occupies one column and one row, with overflow hidden. Extend its span using standard Tailwind col-span-* and row-span-* utilities.

Import

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

Props

All standard HTMLDivElement props are forwarded.

Examples

Two-column layout

<Grid size="lg">
  <GridItem className="col-span-8">
    <MainContent />
  </GridItem>
  <GridItem className="col-span-4">
    <Aside />
  </GridItem>
</Grid>

Full-width hero

<Grid size="xl">
  <GridItem className="col-span-full">
    <Hero />
  </GridItem>
</Grid>

Multi-row item

<Grid size="md">
  <GridItem className="col-span-4 row-span-2">
    <FeaturedCard />
  </GridItem>
  <GridItem className="col-span-8">
    <Content />
  </GridItem>
</Grid>

Implementation notes

GridItem has no CVA variants — all customisation is via className. This is intentional: column spans are not a finite set of named variants, they're arbitrary CSS values (col-span-1 through col-span-full). Adding them as enum variants would either be exhaustive to the point of unusability or too restrictive.

The default overflow-hidden prevents content from breaking out of the grid cell, which is the most common cause of grid layout bugs.