---
title: 列布局
description: 用于并排显示 Card、Tile 等内容的响应式网格布局，可自动适应屏幕尺寸。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Columns 组件创建响应式网格布局，用于并排显示内容元素。网格会自动适应较小的屏幕，在移动设备上堆叠显示，在桌面设备上扩展布局。
适用于 Card、Tile、图片和自定义组件。
屏幕截图显示的是英文界面。
## 基本用法
以两列显示内容（默认）：
```mdx
```
## 更多列
使用 `cols={3}` 或 `cols={4}` 创建更紧凑的布局：
```mdx
...
```
## 选择列数
| 内容类型 | 推荐列数 |
|--------------|---------------------|
| 带图片的 Tile | 2-3 |
| 文本较多的项目 | 2 |
| 小型指标/统计数据 | 3-4 |
| 图片对比 | 2 |
## 响应式行为
Columns 会自动适应屏幕尺寸：
- **移动设备**（< 768px）：1 列
- **平板设备**（768px - 1024px）：最多 2 列
- **桌面设备**（> 1024px）：完整列数
## Props
每行的列数。接受 1 到 4 之间的值。
## 接下来做什么？
浏览所有可用组件
了解如何在 MDX 中使用组件