网格

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

API 参考

¥API Reference

此组件基于 div 元素并支持 常用边距属性。

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

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

¥Use these props to create grid layouts.

以下属性在 方框、弹性元素、网格、容器 和 部分 组件之间共享。在 布局 中了解更多关于布局组件的信息。

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

示例

¥Examples

响应式

¥Responsive

所有标记为 Responsive 的属性，例如 columns 和 rows，都接受 断点对象。例如，以下网格从 1 列开始，从中间断点开始使用 2 列。

¥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>