列布局
用于并排显示 Card、Tile 等内容的响应式网格布局，可自动适应屏幕尺寸。
Columns 组件创建响应式网格布局，用于并排显示内容元素。网格会自动适应较小的屏幕，在移动设备上堆叠显示，在桌面设备上扩展布局。
适用于 Card、Tile、图片和自定义组件。
屏幕截图显示的是英文界面。
基本用法
以两列显示内容（默认）：
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=mst25htz" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=mst25htz" alt="Tabs preview" />
</Tile>
</Columns>更多列
使用 cols={3} 或 cols={4} 创建更紧凑的布局：
<Columns cols={3}>
...
</Columns>选择列数
| 内容类型 | 推荐列数 |
|---|---|
| 带图片的 Tile | 2-3 |
| 文本较多的项目 | 2 |
| 小型指标/统计数据 | 3-4 |
| 图片对比 | 2 |
响应式行为
Columns 会自动适应屏幕尺寸：
- 移动设备（< 768px）：1 列
- 平板设备（768px - 1024px）：最多 2 列
- 桌面设备（> 1024px）：完整列数
Props
每行的列数。接受 1 到 4 之间的值。