> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 用 Columns 做响应式布局

> 用 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 内

结构示例：<br />Section → Columns → 元素

## 重要提示

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.