布局

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

纯样式核心包

示例

访客

订单

趋势（桌面占一半，手机占满）

一

二

三

四

主内容

文章管理

第一行

第二行

在线试用 Markdown 版

代码

<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`	容器与子元素（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）	两个子元素	两端对齐：标题在左，操作在右，窄屏自动换行

样式类

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

布局只改变视觉位置，不改变阅读顺序：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。

布局

示例