布局 ​

使用 24 栏网格快速组织页面内容。

TIP

Row / Col 默认基于 Flex 布局，无需再设置 type="flex"。 默认断点收敛为 xs / sm / md 三档，推荐从窄屏开始逐步增强。

基础布局 ​

通过 row 和 col 的 span 属性组织内容分区。

列间距 ​

使用 gutter 控制列之间的留白。

混合布局 ​

组合不同的列宽，构建更灵活的内容分组。

列偏移 ​

使用 offset 控制列的起始位置。

对齐方式 ​

通过 justify 和 align 调整行内容的分布方式。

响应式布局 ​

默认断点如下：

  • xs：< 480px
  • sm：>= 480px
  • md：>= 768px

隐藏工具类 ​

如需按断点隐藏元素，请引入：

ts
import 'element-plus-mobile/theme-chalk/display.css'

可用类名如下：

  • hidden-xs-only：仅在 xs 隐藏
  • hidden-sm-only：仅在 sm 隐藏
  • hidden-sm-and-down：在 sm 及更窄屏幕隐藏
  • hidden-sm-and-up：在 sm 及更宽屏幕隐藏
  • hidden-md-only：仅在 md 隐藏
  • hidden-md-and-down：在 md 及更窄屏幕隐藏
  • hidden-md-and-up：在 md 及更宽屏幕隐藏

Row API ​

Row 属性 ​

属性名说明类型默认值
gutter栅格间隔number0
justify水平方向对齐方式enumstart
align垂直方向对齐方式enum—
tag自定义元素标签stringdiv

Row 插槽 ​

插槽名说明
default自定义默认内容

Col API ​

Col 属性 ​

属性名说明类型默认值
span栅格占据的列数number24
offset左侧偏移的列数number0
push向右移动的列数number0
pull向左移动的列数number0
xs< 480px 响应式列配置number / object—
sm>= 480px 响应式列配置number / object—
md>= 768px 响应式列配置number / object—
tag自定义元素标签stringdiv

Col 插槽 ​

插槽名说明
default自定义默认内容