mintlify__docs/zh/components/columns.mdx

---
title: "列"
description: "使用 columns 组件将卡片和其他组件排列在响应式网格布局中。"
keywords: ['卡片分组', '网格布局', '多列布局']
---

`Columns` 组件用于在响应式网格布局中排列内容。它通常通过指定网格列数，将卡片排成网格。你还可以使用 `Column` 子组件来包裹任意内容。列是响应式的，并会在小屏幕上自动调整布局。

<Columns cols={2}>
  <Card title="快速开始" icon="rocket">
    使用我们的快速入门指南配置你的项目。
  </Card>

  <Card title="API 参考" icon="code">
    浏览你的 API 的端点、参数和示例。
  </Card>
</Columns>

```mdx Columns example
<Columns cols={2}>
  <Card title="Get started">
    Set up your project with our quickstart guide.
  </Card>
  <Card title="API reference">
    Explore endpoints, parameters, and examples for your API.
  </Card>
</Columns>
```

<div id="column-sub-component">
  ## Column 子组件
</div>

使用 `Column` 组件在单独的列中包裹文本或代码。当你想要并排显示任意内容，而不仅仅是卡片或其他组件时，这非常有用。

<Columns cols={2}>
  <Column>

  **Installation**

  ```bash
  npm install my-package
  ```

  </Column>
  <Column>

  **Usage**

  ```javascript
  import { init } from 'my-package';
  init();
  ```

  </Column>
</Columns>

````mdx Column sub-component example
<Columns cols={2}>
  <Column>

  **Installation**

  ```bash
  npm install my-package
  ```

  </Column>
  <Column>

  **Usage**

  ```javascript
  import { init } from 'my-package';
  init();
  ```

  </Column>
</Columns>
````

<div id="properties">
  ## 属性
</div>

<ResponseField name="cols" type="number" default={2}>
  每行包含的列数。可接受的值范围为 1 到 4。
</ResponseField>