# 布局

纯样式组件：不需要 JS，写好标记即可。响应式栅格（桌面 12 列、平板 8 列、手机 4 列）、自适应卡片网格、主内容加侧栏、垂直堆叠、水平排列、两端对齐。间距来自 Token，不要自己写死。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div class="zh-grid">
  <div class="zh-col" style="--d:3;--t:4;--p:4"><div class="zh-card">访客</div></div>
  <div class="zh-col" style="--d:3;--t:4;--p:4"><div class="zh-card">订单</div></div>
  <div class="zh-col" style="--d:6;--t:8;--p:4"><div class="zh-card">趋势（桌面占一半，手机占满）</div></div>
</div>

<div class="zh-auto-grid">
  <div class="zh-card">一</div><div class="zh-card">二</div><div class="zh-card">三</div><div class="zh-card">四</div>
</div>

<div class="zh-with-aside">
  <main class="zh-card">主内容</main>
  <aside class="zh-card">侧栏</aside>
</div>

<div class="zh-split"><h4>文章管理</h4><button class="zh-btn primary">新建</button></div>
<div class="zh-row" style="--g:8px"><button class="zh-btn">甲</button><button class="zh-btn">乙</button></div>
<div class="zh-stack" style="--g:8px"><div>第一行</div><div>第二行</div></div>
```

## 样式类

`zh-grid`、`zh-col`、`zh-auto-grid`、`zh-with-aside`、`zh-stack`、`zh-row`、`zh-split`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-grid + zh-col` | 容器与子元素（class） | 在 zh-col 上用 style="--d:6;--t:8;--p:4" | 12 / 8 / 4 列栅格。--d 是桌面（≥ 1200px）占几列，--t 是平板（768 到 1199px），--p 是手机（≤ 767px）；不写则桌面占 3、平板占 4、手机占 4。列间距随断点变化 |
| `zh-auto-grid` | 容器（class） | 直接放卡片等子元素 | 按宽度自动排：每列至少 220px，放得下几列就几列，不需要写列数 |
| `zh-with-aside` | 容器（class） | 两个子元素：主内容、侧栏 | 主内容加 320px 侧栏；宽度 ≤ 1199px 时侧栏掉到下面 |
| `zh-stack` | 容器（class） | 可用 style="--g:8px" 改间距，默认 12px | 垂直堆叠 |
| `zh-row` | 容器（class） | 可用 style="--g:8px" | 水平排列，放不下自动换行，垂直居中 |
| `zh-split` | 容器（class） | 两个子元素 | 两端对齐：标题在左，操作在右，窄屏自动换行 |

## 无障碍

- 布局只改变视觉位置，不改变阅读顺序：DOM 里的先后就是读屏和 Tab 的先后
- 栅格里需要标题的区块请用 <section aria-labelledby> 或 aria-label，方便读屏用户导航

## 常见问题

### 布局是什么？

响应式栅格（桌面 12 列、平板 8 列、手机 4 列）、自适应卡片网格、主内容加侧栏、垂直堆叠、水平排列、两端对齐。间距来自 Token，不要自己写死。

### 怎么使用布局？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 布局支持键盘和读屏吗？

布局只改变视觉位置，不改变阅读顺序：DOM 里的先后就是读屏和 Tab 的先后；栅格里需要标题的区块请用 <section aria-labelledby> 或 aria-label，方便读屏用户导航。

### 布局需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。