Grid provides a powerful CSS Grid-based layout system with support for responsive design, grid template areas, and flexible positioning.
Import
import { Grid } from 'reshaped';
Basic Usage
<Grid columns={3} gap={4}>
<View padding={4} backgroundColor="neutral-faded">Item 1</View>
<View padding={4} backgroundColor="neutral-faded">Item 2</View>
<View padding={4} backgroundColor="neutral-faded">Item 3</View>
</Grid>
Responsive Columns
<Grid columns={{ s: 1, m: 2, l: 3 }} gap={4}>
<View padding={4} backgroundColor="neutral-faded">Item 1</View>
<View padding={4} backgroundColor="neutral-faded">Item 2</View>
<View padding={4} backgroundColor="neutral-faded">Item 3</View>
<View padding={4} backgroundColor="neutral-faded">Item 4</View>
</Grid>
Grid.Item with Spanning
<Grid columns={4} gap={4}>
<Grid.Item colSpan={2}>
<View padding={4} backgroundColor="primary-faded">Spans 2 columns</View>
</Grid.Item>
<View padding={4} backgroundColor="neutral-faded">Item 2</View>
<View padding={4} backgroundColor="neutral-faded">Item 3</View>
</Grid>
Grid Template Areas
<Grid
areas={[
'header header',
'sidebar content',
'footer footer'
]}
gap={4}
>
<Grid.Item area="header">
<View padding={4} backgroundColor="primary-faded">Header</View>
</Grid.Item>
<Grid.Item area="sidebar">
<View padding={4} backgroundColor="neutral-faded">Sidebar</View>
</Grid.Item>
<Grid.Item area="content">
<View padding={4} backgroundColor="neutral-faded">Content</View>
</Grid.Item>
<Grid.Item area="footer">
<View padding={4} backgroundColor="primary-faded">Footer</View>
</Grid.Item>
</Grid>
Custom Template Columns
<Grid columns="200px 1fr 1fr" gap={4}>
<View padding={4} backgroundColor="neutral-faded">Fixed width</View>
<View padding={4} backgroundColor="neutral-faded">Flexible</View>
<View padding={4} backgroundColor="neutral-faded">Flexible</View>
</Grid>
Auto Flow
<Grid columns={3} autoFlow="dense" gap={4}>
<Grid.Item colSpan={2}>
<View padding={4} backgroundColor="primary-faded">Wide item</View>
</Grid.Item>
<View padding={4} backgroundColor="neutral-faded">Item 2</View>
<View padding={4} backgroundColor="neutral-faded">Item 3</View>
</Grid>
Props
Grid Props
Node for inserting children
columns
Responsive<number | string>
Grid template columns. Number creates equal columns (e.g., 3 = “repeat(3, 1fr)”), or use CSS Grid syntax (e.g., “200px 1fr 1fr”)
rows
Responsive<number | string>
Grid template rows. Number creates equal rows, or use CSS Grid syntax
Gap between grid items, base unit token number multiplier
Horizontal gap between grid items, base unit token number multiplier
Vertical gap between grid items, base unit token number multiplier
align
Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>
Align grid items vertically (align-items)
justify
Responsive<'start' | 'center' | 'end' | 'space-between' | 'space-around'>
Justify grid items horizontally (justify-items)
Grid areas for template syntax. Each string represents a row with space-separated area names
autoFlow
Responsive<'row' | 'column' | 'dense' | 'row dense' | 'column dense'>
Grid auto flow direction
Grid auto columns size (e.g., “minmax(0, 1fr)”)
Grid auto rows size (e.g., “minmax(100px, auto)”)
width
Responsive<string | number>
Width of the grid container, literal css value or unit token multiplier
height
Responsive<string | number>
Height of the grid container, literal css value or unit token multiplier
maxWidth
Responsive<string | number>
Maximum width of the grid container, literal css value or unit token multiplier
as
keyof React.JSX.IntrinsicElements
Custom root element html tag
Additional classname for the root element
Additional attributes for the root element
Grid.Item Props
Node for inserting children
Grid area name for template syntax
Number of columns to span
as
keyof React.JSX.IntrinsicElements
Custom item element html tag
Additional classname for the item element
Additional attributes for the item element
When using a number for columns, it automatically converts to repeat(n, 1fr) for equal-width columns.
Grid template areas provide a visual way to define layouts. Use the same area name in multiple cells to span them.
colSpan and colEnd both control column spanning, but colEnd has higher priority if both are set.