组件

栅格

用于创建栅格布局的组件。

<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Grid>

API 参考

此组件基于 div 元素,并支持常用的 margin 属性

使用这些属性来创建栅格布局。

属性类型默认值
as
"div" | "span"
"div"
asChild
boolean
无默认值
display
Responsive<"none" | "inline-grid" | "grid">
无默认值
areas
Responsive<string>
无默认值
columns
Responsive<enum | string>
无默认值
rows
Responsive<enum | string>
无默认值
flow
Responsive<enum>
无默认值
align
Responsive<enum>
无默认值
justify
Responsive<"start" | "center" | "end" | "between">
无默认值
gap
Responsive<enum | string>
无默认值
gapX
Responsive<enum | string>
无默认值
gapY
Responsive<enum | string>
无默认值

以下属性在 BoxFlexGridContainerSection 组件之间共享。请在布局中阅读更多关于布局组件的信息。

属性类型默认值
p
Responsive<enum | string>
无默认值
px
Responsive<enum | string>
无默认值
py
Responsive<enum | string>
无默认值
pt
Responsive<enum | string>
无默认值
pr
Responsive<enum | string>
无默认值
pb
Responsive<enum | string>
无默认值
pl
Responsive<enum | string>
无默认值
width
Responsive<string>
无默认值
minWidth
Responsive<string>
无默认值
maxWidth
Responsive<string>
无默认值
height
Responsive<string>
无默认值
minHeight
Responsive<string>
无默认值
maxHeight
Responsive<string>
无默认值
position
Responsive<enum>
无默认值
inset
Responsive<enum | string>
无默认值
top
Responsive<enum | string>
无默认值
right
Responsive<enum | string>
无默认值
bottom
Responsive<enum | string>
无默认值
left
Responsive<enum | string>
无默认值
overflow
Responsive<enum>
无默认值
overflowX
Responsive<enum>
无默认值
overflowY
Responsive<enum>
无默认值
flexBasis
Responsive<string>
无默认值
flexShrink
Responsive<enum | string>
无默认值
flexGrow
Responsive<enum | string>
无默认值
gridArea
Responsive<string>
无默认值
gridColumn
Responsive<string>
无默认值
gridColumnStart
Responsive<string>
无默认值
gridColumnEnd
Responsive<string>
无默认值
gridRow
Responsive<string>
无默认值
gridRowStart
Responsive<string>
无默认值
gridRowEnd
Responsive<string>
无默认值

示例

响应式

所有标记为 Responsive 的属性,例如 columnsrows 接受断点对象。例如,以下栅格开始时为 1 列,并在中等断点后使用 2 列。

<Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto">
<Box height="64px">
<DecorativeBox />
</Box>
<Box height="64px">
<DecorativeBox />
</Box>
</Grid>
上一个Flex
下一个Container