# 网格

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

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

  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />

  <DecorativeBox />
</Grid>
```

## [API 参考](#api-参考)

此组件基于 `div` 元素，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

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

| 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 |
| `alignContent` | `Responsive<enum>`                                      | No default value |
| `justifyItems` | `Responsive<enum>`                                      | 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](./box)、[Flex](./flex)、[Grid](./grid)、[Container](./container) 和 [Section](./section) 组件之间共享。有关布局组件的更多信息，请参阅 [布局](/themes/docs/overview/layout)。

| 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 |
| `alignSelf`       | `Responsive<enum>`           | No default value |
| `justifySelf`     | `Responsive<enum>`           | No default value |

## [示例](#示例)

### [响应式](#响应式)

所有标记为 `Responsive` 的属性，如 `columns` 和 `rows`，都接受 [断点对象](/themes/docs/theme/breakpoints)。例如，以下网格从 1 列开始，并在中等断点使用 2 列。

```jsx
<Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto">
  <Box height="64px">
    <DecorativeBox />
  </Box>

  <Box height="64px">
    <DecorativeBox />
  </Box>
</Grid>
```

<!--$-->

<!--/$-->