Grid

Grid renders a polymorphic CSS Grid container. Its convenience props map to grid templates, gaps, item alignment, and track alignment.

Open in Storybook

Import

import { Grid } from "@tosui/react";

Basic usage

Preview

Code

<Grid columns="repeat(3, 1fr)" gap={4}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
  <Box p={4} bg="warning-subtle">Item 4</Box>
  <Box p={4} bg="error-subtle">Item 5</Box>
  <Box p={4} bg="info-subtle">Item 6</Box>
</Grid>

Column patterns

Preview

Half

Half

Sidebar (200px)

Main (flexible)

Item 1

Item 2

Item 3

Item 4

Code

{/* Equal columns */}
<Grid columns="1fr 1fr" gap={4}>
  <Box p={4} bg="primary-subtle">Half</Box>
  <Box p={4} bg="accent-subtle">Half</Box>
</Grid>

{/* Fixed + flexible */}
<Grid columns="200px 1fr" gap={4}>
  <Box p={4} bg="primary-subtle">Sidebar (200px)</Box>
  <Box p={4} bg="accent-subtle">Main (flexible)</Box>
</Grid>

{/* Auto-fit responsive */}
<Grid columns="repeat(auto-fit, minmax(150px, 1fr))" gap={4}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
  <Box p={4} bg="warning-subtle">Item 4</Box>
</Grid>

Rows

Preview

Row 1 (100px)

Row 1 (100px)

Row 2 (200px)

Row 2 (200px)

Code

<Grid columns="1fr 1fr" rows="100px 200px" gap={4}>
  <Box p={4} bg="primary-subtle">Row 1 (100px)</Box>
  <Box p={4} bg="accent-subtle">Row 1 (100px)</Box>
  <Box p={4} bg="success-subtle">Row 2 (200px)</Box>
  <Box p={4} bg="warning-subtle">Row 2 (200px)</Box>
</Grid>

Responsive columns and rows

columns and rows accept responsive objects.

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Code

<Grid
  columns={{
    base: "1fr",
    md: "repeat(2, 1fr)",
    lg: "repeat(3, 1fr)"
  }}
  gap={4}
>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
  <Box p={4} bg="warning-subtle">Item 4</Box>
  <Box p={4} bg="error-subtle">Item 5</Box>
  <Box p={4} bg="info-subtle">Item 6</Box>
</Grid>

Separate row and column gaps

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Code

<Grid columns="repeat(3, 1fr)" gapRow={2} gapColumn={8}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
  <Box p={4} bg="warning-subtle">Item 4</Box>
  <Box p={4} bg="error-subtle">Item 5</Box>
  <Box p={4} bg="info-subtle">Item 6</Box>
</Grid>

Alignment

Preview

1

2

3

Code

<Grid columns="repeat(3, 100px)" gap={4} justify="center" p={4} bg="surface" border="thin" borderColor="border">
  <Box p={4} bg="primary-subtle">1</Box>
  <Box p={4} bg="accent-subtle">2</Box>
  <Box p={4} bg="success-subtle">3</Box>
</Grid>

Props reference

All layout props (columns, rows, gap, justify, align, justifyContent, alignContent) accept responsive objects in addition to simple values.

Prop	Type	Default	Description
columns	ResponsiveValue<string>	-	Grid template columns (CSS value)
rows	ResponsiveValue<string>	-	Grid template rows (CSS value)
gap	ResponsiveValue<0-32>	-	Gap between grid items
gapRow	ResponsiveValue<0-32>	-	Row gap
gapColumn	ResponsiveValue<0-32>	-	Column gap
justify	ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">	-	Distribute tracks horizontally; takes precedence over justifyContent
align	ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">	-	Align items
justifyContent	ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">	-	Distribute tracks horizontally
alignContent	ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">	-	Distribute tracks vertically
as	ElementType	"div"	HTML element to render

TypeScript

import { Grid, type GridProps, type GridOwnProps } from "@tosui/react";