Grid & GridItem

Grid is a responsive layout container built on CSS grid. It fits columns to the available width automatically, or takes a fixed column count / template that collapses gracefully as space shrinks. GridItem wraps a cell to span multiple columns or rows.

When to use

• Card galleries, dashboards, tile layouts that should reflow with the viewport.
• Any responsive grid where you'd otherwise hand-write grid-template-columns media queries.

Import

import { Grid, GridItem } from '@spartanfx/react';

Auto-fit columns (default)

By default Grid auto-fits columns based on breakThreshold (minimum px per column) and gap.

<Grid gap={16} minCols={1} maxCols={4}>
  {cards.map((c) => (
    <div key={c.id} className="card">{c.title}</div>
  ))}
</Grid>

Fixed or templated columns

{/* Fixed 3 columns that collapse when space is tight */}
<Grid cols={3} gap={12}>…</Grid>

{/* Proportional template */}
<Grid cols="1fr 2fr 1fr" gap={12}>…</Grid>

Spanning cells

Wrap a child in GridItem to span columns or rows.

<Grid cols={4} gap={12}>
  <GridItem colSpan={2}><FeaturePanel /></GridItem>
  <GridItem><Stat /></GridItem>
  <GridItem><Stat /></GridItem>
  <GridItem rowSpan={2}><SidePanel /></GridItem>
</Grid>

Key props

Grid

Prop	Type	Default	Notes
cols	'auto' | number | string	'auto'	Auto-fit, fixed count, or an fr template.
gap / columnGap	number | string	12	Spacing (px number or CSS value).
minCols / maxCols	number	1 / —	Bounds when cols="auto".
breakThreshold	number	150	Min px per column for auto-fit.
alignItems / justifyItems	align values	'stretch'	Item alignment.
as	keyof JSX.IntrinsicElements	'div'	Container element.

GridItem

Prop	Type	Default	Notes
colSpan / rowSpan	number	1	Cells to span.
className / style	—	—	Cell overrides.

See the full generated reference: Grid ↗ · GridItem ↗.

See also

• Components overview