## 20 · 布局 Layout

### 20.1 用途
把一行内容按比例切成若干列（等分或按 12 栅格取值）。移动端屏幕窄，绝大多数场景是 2~4 等分；需要主次分栏时才用不等宽 —— 桌面端的「12 栅格 + 响应式断点」在移动端退化为「一档列数 × 可覆盖的列宽」。

### 20.2 结构（anatomy）
- `layout`：行容器，`display: flex` + 换行，承载**列间距**变量
- `col`：列，默认占满一行（`flex-basis: 100%`），由行级等分或列级 span 类决定实际宽度
- `panel`：列内容的可选包壳，提供内边距与最小高度，业务也可直接放自己的卡片
- `gutter`：列间距，四档（0 / 8 / 16 / 24），由行级类写到 CSS 变量上
- `span`：列级权重类（12 栅格取值），可覆盖行级等分

### 20.3 变体维度
- `gutter`：`0` / `8` / `16` / `24`
- `columns`：`0`（不启用等分） / `2` / `3` / `4`
- `align`：`start` / `center` / `end` / `stretch`
- `wrap`：`true`（换行） / `false`（不换行、横向滚动）

### 20.4 状态
- default：常态
- 本组件无交互状态（纯排布，这是设计如此，不是缺失）

### 20.5 交互与触控
- 布局容器不绑点击，不设 `cursor: pointer`，热区始终由列内的业务元素提供
- 列内若是可点区域，其热区不小于 44×44（见 §19.5 与 §6.5）
- `gutter` 由 CSS 变量承载，同一行内所有列的宽度计算共用该变量，避免手工算宽
- `wrap=false` 时容器横向滚动，纵向页面滚动不受影响
- 列宽使用 `flex-basis: calc(...)`，窄屏下不产生横向溢出（列内文本默认 `min-width: 0`）

### 20.6 无障碍
- 布局是**纯视觉分组**：不添加 `role`、不添加 `aria-*`
- 不要为了布局把语义节点（列表 / 按钮）拆到不相邻的列里，否则读屏顺序会错乱
- 视觉顺序必须与 DOM 顺序一致（不用 `order` 重排）

### 20.7 doNotInvent
- 响应式断点（移动端只有一档列数，不为大屏定义断点）
- 列的排序 / 拖拽
- 栅格嵌套的层级规则

### 20.8 unknowns
- 列内推荐的最大列数（本实现提供 2 / 3 / 4 三档）
- 列高等分（`stretch` 之外的等高策略）