栅格系统

24 栅格支持 xs / sm / md / lg / xl / xxl 六个断点，gutter 提供 8 / 12 / 16 / 20 / 24px 五档。卡片内部间距统一使用 16px。

返回组件库
21 · GRID · 栅格系统（§3.8）
24 栅格演示（gutter 16px）
col-24
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
4
4
4
4
4
4
响应式断点
xs
0
sm
640px
md
768px
lg
1024px
xl
1280px
xxl
1536px
<section id="grid" class="section">
    <div class="section-title">21 · GRID · 栅格系统（§3.8）</div>

    <div class="demo-sub">24 栅格演示（gutter 16px）</div>
    <div class="demo-box">
      <div style="display:flex;flex-direction:column;gap:8px">
        <div style="display:flex;gap:16px">
          <div style="flex:24;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-24</div>
        </div>
        <div style="display:flex;gap:16px">
          <div style="flex:12;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-12</div>
          <div style="flex:12;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-12</div>
        </div>
        <div style="display:flex;gap:16px">
          <div style="flex:8;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-8</div>
          <div style="flex:8;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-8</div>
          <div style="flex:8;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-8</div>
        </div>
        <div style="display:flex;gap:16px">
          <div style="flex:6;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-6</div>
          <div style="flex:6;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-6</div>
          <div style="flex:6;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-6</div>
          <div style="flex:6;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">col-6</div>
        </div>
        <div style="display:flex;gap:16px">
          <div style="flex:4;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">4</div>
          <div style="flex:4;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">4</div>
          <div style="flex:4;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">4</div>
          <div style="flex:4;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">4</div>
          <div style="flex:4;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">4</div>
          <div style="flex:4;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px;padding:8px;text-align:center;font-size:11px;font-family:ui-monospace,monospace;color:#185058">4</div>
        </div>
      </div>
    </div>

    <div class="demo-sub">响应式断点</div>
    <div class="demo-box">
      <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:8px;font-size:11px;text-align:center">
        <div style="padding:10px 4px;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px"><div style="font-weight:600;color:#18181B">xs</div><div style="color:#71717A;font-family:ui-monospace,monospace;margin-top:2px">0</div></div>
        <div style="padding:10px 4px;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px"><div style="font-weight:600;color:#18181B">sm</div><div style="color:#71717A;font-family:ui-monospace,monospace;margin-top:2px">640px</div></div>
        <div style="padding:10px 4px;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px"><div style="font-weight:600;color:#18181B">md</div><div style="color:#71717A;font-family:ui-monospace,monospace;margin-top:2px">768px</div></div>
        <div style="padding:10px 4px;background:#F0F7F8;border:1px solid #B0D6DB;border-radius:4px"><div style="font-weight:600;color:#185058">lg</div><div style="color:#185058;font-family:ui-monospace,monospace;margin-top:2px">1024px</div></div>
        <div style="padding:10px 4px;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px"><div style="font-weight:600;color:#18181B">xl</div><div style="color:#71717A;font-family:ui-monospace,monospace;margin-top:2px">1280px</div></div>
        <div style="padding:10px 4px;background:#FAFAFA;border:1px solid #E4E4E7;border-radius:4px"><div style="font-weight:600;color:#18181B">xxl</div><div style="color:#71717A;font-family:ui-monospace,monospace;margin-top:2px">1536px</div></div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。