跳到主要内容

栅格布局

用于布局和排列内容的容器。

何时使用​

  • 当需要将页面内容进行网格化排列时，例如图片、卡片或其他组件。
  • 在响应式设计中，需要根据屏幕大小调整布局时，使用网格可以提供灵活性。

一、属性​

1. 功能​

1）常用布局​

常用布局：栅格提供了四种常用的布局模式，以便快速布局。

image-20250709161856533

image-20250708172015594

2）行数​

行数：默认是 2，表示生成行容器的数量。

3）列数​

列数：默认是 1，表示一个行容器内生成的列容器数量。

image-20250708172107572

指定生成行容器数量为 3，列容器数量为 3。

image-20250708172430910

4）行间距​

行间距：控制行容器之间的间距。

image-20250708172729002

image-20250708172711299

5）列间距​

列间距：控制列容器之间的间距。

image-20250708172806097

image-20250709084802102

2. 状态​

无特殊状态，详见 通用状态。

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

1. 图片库​

在相册或产品展示页面中，使用网格排列图片，提升视觉效果。

以下是一个 3 行 3 列的网格布局，并在其中依次放置 100×100 的图片组件。

image-20250709085557507

2. 卡片布局​

在信息展示页面中，使用网格排列多个卡片，便于用户快速浏览。

image-20250709091448253

3. 表单布局​

在复杂表单中，使用网格将输入字段进行合理排列，提高用户体验。

以下是移动端 1 行多列的网格布局，分别放置表单项。

image-20250709094514627

4. 功能菜单​

在有多个功能可以选择的界面中，使用网格展示功能，方便用户使用。

image-20250709092934194

5. 底部操作栏​

在商品详情页底部或社交内容底部，利用网格设置底部操作栏，提升用户体验。

image-20250709095807504

6. 响应式设计​

在不同设备上，使用网格布局自动调整内容布局，确保良好的用户体验。