Grid

Full CSS Grid control — template columns/rows/areas, gaps, auto-flow. Pair with GridItem for span and area placement.

HeroSpans the first two columns of row 1.

SidebarSingle column, spans rows 1 and 2.

MainTwo columns, row 2.

FooterSpans all three columns.

Usage

import { Grid, GridItem } from '@bwo-ui/react';

<Grid
  templateAreas={[
    'hero hero side',
    'main main side',
    'foot foot foot',
  ]}
  templateColumns="1fr 1fr 220px"
  templateRows="110px 130px 70px"
  gap={12}
>
  <GridItem area="hero">Hero</GridItem>
  <GridItem area="side">Sidebar</GridItem>
  <GridItem area="main">Main</GridItem>
  <GridItem area="foot">Footer</GridItem>
</Grid>

Tip: GridItem doesn't style its own box — wrap your content in a Card (or any element with a background/border) so each cell is visible. Add templateRows when you want explicit row heights; otherwise rows are sized to their content.

Props — Grid

Prop	Type	Default	Description
`templateColumns`	`string \| responsive`	—	CSS grid-template-columns.
`templateRows`	`string \| responsive`	—	CSS grid-template-rows.
`templateAreas`	`string[]`	—	One row per string (auto-wrapped in quotes).
`columns`	`number \| responsive`	—	Convenience: repeat(N, 1fr).
`rows`	`number \| responsive`	—	Convenience: repeat(N, auto).
`autoFlow`	`'row' \| 'column' \| 'dense' \| 'row dense' \| 'column dense'`	—	grid-auto-flow.
`autoRows`	`string \| number`	—	grid-auto-rows.
`autoColumns`	`string \| number`	—	grid-auto-columns.
`gap / columnGap / rowGap`	`string \| number`	—	Spacing controls.

Props — GridItem

Prop	Type	Default	Description
`colSpan / rowSpan`	`number`	—	span N tracks.
`colStart / colEnd`	`number`	—	Grid line placement.
`rowStart / rowEnd`	`number`	—	Grid line placement.
`area`	`string`	—	Named grid-area (must match templateAreas).