> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 列

> 使用 columns 组件将卡片和其他组件排列在响应式多列网格布局中，支持自定义列数。

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

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

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

```mdx Columns example theme={null}
<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 theme={null}
    npm install my-package
    ```
  </Column>

  <Column>
    **Usage**

    ```javascript theme={null}
    import { init } from 'my-package';
    init();
    ```
  </Column>
</Columns>

````mdx Column sub-component example theme={null}
<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>