用于创建网格布局的组件。
<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Grid>
此组件基于 div 元素，并支持 常见边距属性。
使用这些属性来创建网格布局。
| Prop | Type | Default |
|---|---|---|
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 |
以下属性在 Box、Flex、Grid、Container 和 Section 组件之间共享。有关布局组件的更多信息，请参阅 布局。
| Prop | Type | Default |
|---|---|---|
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 |
所有标记为 Responsive 的属性，如 columns 和 rows，都接受 断点对象。例如，以下网格从 1 列开始，并在中等断点使用 2 列。
<Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto">
<Box height="64px">
<DecorativeBox />
</Box>
<Box height="64px">
<DecorativeBox />
</Box>
</Grid>