SimpleGrid

Renders a CSS grid container with a fixed number of equal-width columns and configurable row and column gaps. It's the easiest way to lay out a uniform set of cards or tiles without writing custom CSS.

3 columns

1
2
3
4
5
6
<SimpleGrid cols={3} spacing="md">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</SimpleGrid>

4 columns with separate vertical spacing

A
B
C
D
E
F
G
H
<SimpleGrid cols={4} spacing="sm" verticalSpacing="lg">
  {items.map((item) => <div key={item}>{item}</div>)}
</SimpleGrid>

Single column (default)

Item 1
Item 2
Item 3
<SimpleGrid spacing="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</SimpleGrid>

Props

PropTypeDefaultDescription
colsnumber1Number of equal-width columns per row
spacing'xs'|'sm'|'md'|'lg'|'xl'|string—Horizontal gap between columns
verticalSpacing'xs'|'sm'|'md'|'lg'|'xl'|string—Vertical gap between rows; falls back to spacing
componentstring'div'HTML element to render as root
classstring—Additional CSS class names
styleobject—Inline styles
childrenReactNode—Children placed into grid cells in source order