布局

布局组件只处理空间关系，不替内容命名，也不改变 HTML 语义。

页面与内容宽度

wx-container · --article

可读的内容宽度

页面容器控制画布，阅读宽度控制行长；语义仍由 main、article 和 section 承担。

查看代码 · Source

<article class="wx-container wx-container--article"><p class="wx-attr">wx-container · --article</p><h3>可读的内容宽度</h3><p class="wx-measure">页面容器控制画布，阅读宽度控制行长；语义仍由 main、article 和 section 承担。</p></article>

堆叠、簇与分栏

wx-stack 管理垂直节奏。

紧密内容共享更小间距。

横向换行共享间距

第一列内容

第二列内容

查看代码 · Source

<div class="wx-stack wx-stack--tight"><p>wx-stack 管理垂直节奏。</p><p>紧密内容共享更小间距。</p></div><hr class="wx-rule"><div class="wx-cluster wx-cluster--tight"><span class="wx-tag">横向</span><span class="wx-tag">换行</span><span class="wx-tag">共享间距</span></div><div class="wx-cols wx-cols--2" style="margin-block-start:var(--space-6)"><p>第一列内容</p><p>第二列内容</p></div>

何时使用、何时不用与 API

组件	何时使用 · 不用	契约
`wx-page / wx-container / wx-measure`	页面底色、三档内容宽度、可读行长；不要在组件内再套页面容器。	语义由 `main/article/section` 提供；宽度变体为 `--article/content/showcase`。
`wx-stack / wx-cluster / wx-spread / wx-cols`	垂直节奏、可换行横组、两端信息、简单分栏；复杂布局写页面 grid。	只负责布局，不改变 DOM 语义；紧/松变体是节奏，不是状态。
`wx-rule`	章节或条目边界；能靠邻近表达时不加线。	使用 `hr`；`--short/strong` 只用于明确层级。

页面根

wx-page 放在 body 或页面根上，负责页面级的左右留白与最小高度。它是唯一允许出现在 body 上的 wx- 类——本站每一页都用它。

<body class="wx-page">
  <a class="wx-skip" href="#main">跳到主要内容</a>
  <header>…</header>
  <main id="main">…</main>
</body>

它不限制内容宽度——那是 wx-container 与 --width-* 的事。把两件事分开，是为了让一个全宽的页头和一段限宽的正文能共存于同一页。