Grid

A CSS Grid layout component for creating two-dimensional layouts. Supports all standard grid properties and Box-style layout props.

Basic Usage

Item 1

Item 2

Item 3

import { Grid, Box } from 'uiplex';

<Grid templateColumns="repeat(3, 1fr)" gap={16}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

Grid Templates

1fr

2fr

1fr

Row 1

Row 2

Row 3

<Grid templateColumns="1fr 2fr 1fr" gap={12}>
  <Box>1fr</Box>
  <Box>2fr</Box>
  <Box>1fr</Box>
</Grid>

<Grid templateRows="repeat(3, 100px)" gap={12}>
  <Box>Row 1</Box>
  <Box>Row 2</Box>
  <Box>Row 3</Box>
</Grid>

Gap

Gap 8px

Item 2

Item 3

Column Gap 16px

Row Gap 8px

Item 3

<Grid templateColumns="repeat(3, 1fr)" gap={8}>...</Grid>
<Grid templateColumns="repeat(3, 1fr)" columnGap={16} rowGap={8}>...</Grid>

With Layout Props

Item 1

Item 2

Item 3

Item 4

<Grid
  templateColumns="repeat(2, 1fr)"
  gap={16}
  padding={20}
  backgroundColor="var(--bg-secondary)"
  borderRadius={8}
>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Grid>

API Reference

Prop	Type	Default	Description
templateColumns	string	-	CSS grid-template-columns value
templateRows	string	-	CSS grid-template-rows value
gap	number \| string	-	Gap between grid items
columnGap	number \| string	-	Gap between columns
rowGap	number \| string	-	Gap between rows
autoFlow	"row" \| "column" \| "dense" \| "row dense" \| "column dense"	-	CSS grid-auto-flow value
width, height, padding, margin, etc.	number \| string	-	All Box-style layout props are supported
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles