<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Grid>
此组件基于 div 元素并支持 常用边距属性。
使用这些属性创建网格布局。
| 属性 | 类型 | 默认值 |
|---|---|---|
as | "div" | "span" | "div" |
asChild | 布尔值 | 无默认值 |
display | 响应式<"none" | "inline-grid" | "grid"> | 无默认值 |
areas | 响应式<字符串> | 无默认值 |
columns | 响应式<枚举 | 字符串> | 无默认值 |
rows | 响应式<枚举 | 字符串> | 无默认值 |
flow | 响应式<枚举> | 无默认值 |
align | 响应式<枚举> | 无默认值 |
justify | 响应式<"start" | "center" | "end" | "between"> | 无默认值 |
gap | 响应式<枚举 | 字符串> | 无默认值 |
gapX | 响应式<枚举 | 字符串> | 无默认值 |
gapY | 响应式<枚举 | 字符串> | 无默认值 |
以下属性在 Box、Flex、Grid、Container 和 Section 组件之间共享。在 布局 中阅读有关布局组件的更多信息。
| 属性 | 类型 | 默认值 |
|---|---|---|
p | 响应式<枚举 | 字符串> | 无默认值 |
px | 响应式<枚举 | 字符串> | 无默认值 |
py | 响应式<枚举 | 字符串> | 无默认值 |
pt | 响应式<枚举 | 字符串> | 无默认值 |
pr | 响应式<枚举 | 字符串> | 无默认值 |
pb | 响应式<枚举 | 字符串> | 无默认值 |
pl | 响应式<枚举 | 字符串> | 无默认值 |
width | 响应式<字符串> | 无默认值 |
minWidth | 响应式<字符串> | 无默认值 |
maxWidth | 响应式<字符串> | 无默认值 |
height | 响应式<字符串> | 无默认值 |
minHeight | 响应式<字符串> | 无默认值 |
maxHeight | 响应式<字符串> | 无默认值 |
position | 响应式<枚举> | 无默认值 |
inset | 响应式<枚举 | 字符串> | 无默认值 |
top | 响应式<枚举 | 字符串> | 无默认值 |
right | 响应式<枚举 | 字符串> | 无默认值 |
bottom | 响应式<枚举 | 字符串> | 无默认值 |
left | 响应式<枚举 | 字符串> | 无默认值 |
overflow | 响应式<枚举> | 无默认值 |
overflowX | 响应式<枚举> | 无默认值 |
overflowY | 响应式<枚举> | 无默认值 |
flexBasis | 响应式<字符串> | 无默认值 |
flexShrink | 响应式<枚举 | 字符串> | 无默认值 |
flexGrow | 响应式<枚举 | 字符串> | 无默认值 |
gridArea | 响应式<字符串> | 无默认值 |
gridColumn | 响应式<字符串> | 无默认值 |
gridColumnStart | 响应式<字符串> | 无默认值 |
gridColumnEnd | 响应式<字符串> | 无默认值 |
gridRow | 响应式<字符串> | 无默认值 |
gridRowStart | 响应式<字符串> | 无默认值 |
gridRowEnd | 响应式<字符串> | 无默认值 |
所有标记为 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>