布局工具

<h3 class="demo-sub">stack 间距与分布</h3>
<div class="stack stack--gap-4">
  <p class="demo-label">stack--gap-1（4px）</p>
  <div class="stack stack--row stack--gap-1">
    <span class="demo-box">甲</span><span class="demo-box">乙</span><span class="demo-box">丙</span>
  </div>
  <p class="demo-label">stack--gap-4（16px）</p>
  <div class="stack stack--row stack--gap-4">
    <span class="demo-box">甲</span><span class="demo-box">乙</span><span class="demo-box">丙</span>
  </div>
  <p class="demo-label">stack--gap-8（32px）</p>
  <div class="stack stack--row stack--gap-8">
    <span class="demo-box">甲</span><span class="demo-box">乙</span><span class="demo-box">丙</span>
  </div>
  <p class="demo-label">stack--justify-between</p>
  <div class="stack stack--row stack--justify-between">
    <span class="demo-box">左</span><span class="demo-box">右</span>
  </div>
</div>
<h3 class="demo-sub">surface 三变体</h3>
<div class="grid grid--cols-3 grid--gap-16">
  <div class="surface">默认 · inset 阴影</div>
  <div class="surface surface--elevated">elevated · 卡片阴影</div>
  <div class="surface surface--overlay">overlay · 强底浮层</div>
</div>
<div class="surface surface--p-lg" style="margin-top:12px">surface--p-lg · padding 20px</div>
<h3 class="demo-sub">text 字号 / 色档 / 截断</h3>
<div class="stack stack--gap-2">
  <span class="text--xs">xs 11px · 辅助说明文字</span>
  <span class="text--sm">sm 12px · 辅助说明文字</span>
  <span class="text--base">base 13px · 正文文字</span>
  <span class="text--md">md 14px · 正文文字</span>
  <span class="text--lg">lg 15px · 强调文字</span>
  <span class="text--xl">xl 18px · 小节标题</span>
  <span class="text--2xl">2xl 22px · 页面标题</span>
  <div class="stack stack--row stack--gap-3">
    <span class="text--muted">muted</span>
    <span class="text--faint">faint</span>
    <span class="text--accent">accent</span>
    <span class="text--success">success</span>
    <span class="text--warning">warning</span>
    <span class="text--error">error</span>
  </div>
  <div class="text--truncate" style="max-width:220px">truncate · 这是一段会被省略号截断的超长文本内容</div>
</div>
<h3 class="demo-sub">grid 三列</h3>
<div class="grid grid--cols-3 grid--gap-12">
  <div class="demo-box">列一</div>
  <div class="demo-box">列二</div>
  <div class="demo-box">列三</div>
  <div class="demo-box">列四</div>
  <div class="demo-box">列五</div>
  <div class="demo-box">列六</div>
</div>
<h3 class="demo-sub">divider / center / aspect / visually-hidden</h3>
<div class="stack stack--gap-4">
  <p class="demo-label">divider 水平 / 垂直</p>
  <div class="divider"></div>
  <div class="stack stack--row stack--items-stretch stack--gap-3" style="height:36px">
    <span class="demo-box">左</span>
    <div class="divider divider--vertical"></div>
    <span class="demo-box">右</span>
  </div>
  <p class="demo-label">center 居中盒</p>
  <div class="center surface" style="height:64px">居中内容</div>
  <p class="demo-label">aspect 16:9 比例盒</p>
  <div class="aspect" style="max-width:320px"><div class="demo-fill center">16 : 9</div></div>
  <p class="demo-label">visually-hidden（下句含一段只读给屏幕阅读器的文本）</p>
  <p class="text--sm">评分 4.5 星<span class="visually-hidden">，满分 5 星</span></p>
</div>