Radix Homepage
Made by WorkOS
Radix Homepage
Made by WorkOS
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlaygroundBlog
Components

Grid

Component for creating grid layouts.

View sourceReport an issue
<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">

	<DecorativeBox />

	<DecorativeBox />

	<DecorativeBox />

	<DecorativeBox />

	<DecorativeBox />

	<DecorativeBox />

</Grid>

API Reference

This component is based on the div element and supports common margin props.

Use these props to create grid layouts.

PropTypeDefault
as
"div" | "span"
"div"
asChild
boolean
No default value
display
Responsive<"none" | "inline-grid" | "grid">
No default value
areas
Responsive<string>
No default value
columns
Responsive<enum | string>
No default value
rows
Responsive<enum | string>
No default value
flow
Responsive<enum>
No default value
align
Responsive<enum>
No default value
justify
Responsive<"start" | "center" | "end" | "between">
No default value
gap
Responsive<enum | string>
No default value
gapX
Responsive<enum | string>
No default value
gapY
Responsive<enum | string>
No default value

The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.

PropTypeDefault
p
Responsive<enum | string>
No default value
px
Responsive<enum | string>
No default value
py
Responsive<enum | string>
No default value
pt
Responsive<enum | string>
No default value
pr
Responsive<enum | string>
No default value
pb
Responsive<enum | string>
No default value
pl
Responsive<enum | string>
No default value
width
Responsive<string>
No default value
minWidth
Responsive<string>
No default value
maxWidth
Responsive<string>
No default value
height
Responsive<string>
No default value
minHeight
Responsive<string>
No default value
maxHeight
Responsive<string>
No default value
position
Responsive<enum>
No default value
inset
Responsive<enum | string>
No default value
top
Responsive<enum | string>
No default value
right
Responsive<enum | string>
No default value
bottom
Responsive<enum | string>
No default value
left
Responsive<enum | string>
No default value
overflow
Responsive<enum>
No default value
overflowX
Responsive<enum>
No default value
overflowY
Responsive<enum>
No default value
flexBasis
Responsive<string>
No default value
flexShrink
Responsive<enum | string>
No default value
flexGrow
Responsive<enum | string>
No default value
gridArea
Responsive<string>
No default value
gridColumn
Responsive<string>
No default value
gridColumnStart
Responsive<string>
No default value
gridColumnEnd
Responsive<string>
No default value
gridRow
Responsive<string>
No default value
gridRowStart
Responsive<string>
No default value
gridRowEnd
Responsive<string>
No default value

Examples

Responsive

All props marked Responsive, such as columns and rows accept a breakpoint object. For example, the following grid starts with 1 column, and uses 2 columns from the medium breakpoint.

<Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto">

	<Box height="64px">

		<DecorativeBox />

	</Box>

	<Box height="64px">

		<DecorativeBox />

	</Box>

</Grid>
PreviousFlex
NextContainer
Edit this page on GitHub.