# 布局预设 Layout

分类：内容 · React：Grid / Surface

常用的两栏 / 三栏布局，720px 以下自动叠成一栏；面分三层：base（纸）、sunken（洗色）、raised（只给浮层）。

## 示例
```html
<div class="xxd-layout" data-cols="1-2">
  <div class="xxd-surface" data-level="sunken" style="padding:16px">侧栏 1</div>
  <div class="xxd-surface" style="padding:16px">主体 2</div>
</div>
```

## 属性与类名
- `data-cols`：2up | 3up | 4up | 1-2 | 2-1 | 1-3 | side
- `--layout-gap`：间距
- `data-level（.xxd-surface）`：base | sunken | raised
- 类名：`xxd-layout` `xxd-surface`

## 键盘与读屏
- 布局只是 div，不带语义；页面的 main / nav / aside 由你自己的外层决定
- 窄屏叠成一栏时 DOM 顺序就是阅读顺序