Grid

CSS Grid wrapper with column/row control and a Grid.Item sub-component for span and placement. Supports 1–12 columns and common gap values.

Usage

import { Grid } from 'fxui-core';

<Grid cols="3" gap="4">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</Grid>

Column Count

<Grid cols="1" />   {/* single column */}
<Grid cols="2" />
<Grid cols="3" />
<Grid cols="4" />
<Grid cols="6" />
<Grid cols="12" />  {/* 12-column grid */}

Gap

<Grid cols="3" gap="4" />   {/* gap-4 (16px) */}
<Grid cols="3" gap="8" />   {/* gap-8 (32px) */}

Grid.Item — Spanning

<Grid cols="3" gap="4">
  <Grid.Item colSpan="2">
    <Card>Wide card</Card>
  </Grid.Item>
  <Card>Normal</Card>
  <Grid.Item colSpan="full">
    <Card>Full width</Card>
  </Grid.Item>
</Grid>

Row Span

<Grid cols="4" gap="4">
  <Grid.Item colSpan="2" rowSpan="2">
    <div className="h-full">Featured</div>
  </Grid.Item>
  <Card>A</Card>
  <Card>B</Card>
</Grid>

Props

Grid

| Prop | Type | Default | |------|------|---------| | cols | '1'–'12' \| 'none' | '1' | | rows | '1'–'6' \| 'none' | — | | gap | '0'–'12' | '4' | | align | 'start' \| 'center' \| 'end' \| 'stretch' | 'stretch' | | justify | 'start' \| 'center' \| 'end' \| 'stretch' | 'stretch' | | flow | 'row' \| 'col' \| 'dense' \| 'row-dense' \| 'col-dense' | — |

Grid.Item

| Prop | Type | Default | |------|------|---------| | colSpan | '1'–'12' \| 'full' | — | | rowSpan | '1'–'6' \| 'full' | — | | colStart | string | — | | rowStart | string | — |