用 Columns 做响应式布局

Columns 让你把一个 section 分成多个纵向区域，把内容并排放置。 它是搭建结构化布局的关键，比如：

• 文字 + 图片
• 功能网格
• 多栏 section

​

如何添加 Columns

• 打开左侧边栏
• 进入 Layout
• 把 Columns 拖到某个 section 内

​

Columns 设置

选中后，右侧面板会出现分栏控件。

​

按设备设置布局

你可以为每种设备单独定义分栏布局：

• Desktop：选择分几栏（1 到 6）
• Tablet：为中等屏幕调整布局
• Mobile：通常设为 1 栏，阅读体验更好

👉 这样设计在所有设备上都能响应式显示。

​

调整栏数和宽度

栏数和每栏占多少空间都可以轻松控制。

• 选中 Columns 元素
• 打开右侧的 Settings Panel

​

修改栏数

• 选择一种预设布局（2、3、4 栏等）

​

调整栏宽

两种方式：

• 直接拖动：在画布上拖动两栏之间的分隔线
• 这样可以快速改变宽度比例（比如 70/30 或 50/50）

​

Gap（栏间距）

• Gap 控制各栏之间的间距
• 单位为像素（px）

示例：

• Gap 为 0：各栏紧贴在一起
• Gap 为 20：各栏之间有间隙

​

Columns 的工作方式

• 每一栏都相当于一个容器
• 你可以在每栏内放置元素
• Columns 本身位于 section 内

结构示例：
Section → Columns → 元素

​

重要提示

• Columns 必须放在 section 内
• 每一栏可以容纳多个元素
• 可以按设备分别设置布局，响应式效果更好