布局
用限宽外层容器、间距 token、列网格与显式轨道组合页面。
本页内容
#概览
组合页面时先决定三件事：限制宽度的外层容器、控制列间距与外边距的间距 token，以及区域使用的列网格。原生 Grid 与 Flexbox 负责布局；Master CSS 为这些值命名。
使用滑块或方向键调整视口，观察布局从紧凑堆叠转为八列配置。
工作区布局
<main class="w-full max-w-3xl mx-auto p-md"> <section class="grid-cols(4) gap-sm grid-cols(8)@2xs gap-md@2xs"> <header class="grid-col-span(4) grid-col-span(8)@2xs"><h1>Project overview</h1></header> <article class="grid-col-span(4)"><h2>Revenue</h2><p>$128.4k</p></article> <article class="grid-col-span(4)"><h2>Activation</h2><p>64.2%</p></article> <article class="grid-col-span(4) grid-col-span(5)@2xs"><h2>Weekly demand</h2></article> <aside class="grid-col-span(4) grid-col-span(3)@2xs"><h2>Launch tasks</h2></aside> </section></main>生成的 CSS
@layer theme { :root, :host { --spacing-md: 1rem; --container-3xl: 48rem }}@layer utilities { .grid-cols\(4\) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) } .max-w-3xl { max-width: var(--container-3xl) } .p-md { padding: var(--spacing-md) } @media (width >= 37.5rem) { .grid-cols\(8\)\@2xs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) } } @media (width >= 37.5rem) { .gap-md\@2xs { gap: var(--spacing-md) } } @media (width >= 37.5rem) { .grid-col-span\(5\)\@2xs { grid-column: span 5/span 5 } }}跨列数与网格同步调整
宽布局使用八条等宽轨道。每行都完整分配这些轨道：8、4 + 4，再来是 5 + 3。列间距位于轨道之间。
文字说明
- 同一套网格. 宽版配置使用 grid-cols(8)，每对轨道之间都有相同间距。
- 整行与共用行. 页首跨八条轨道，每个指标跨四条；需求与任务区分别跨五条与三条。
- 同步调整. 断点改变网格列数时，在相同断点更新依赖它的跨列数。
低于 2xs 时，每个区域都跨满四列。达到 2xs 后，页首跨八列，两个指标共用一行，需求与任务区则在下一行以五比三分配。
#选择间距值
p-、m- 与 gap- 等间距 class 接受三种形式：
| 形式 | Class | 生成结果 |
|---|---|---|
| 间距 token | p-md | padding: var(--spacing-md) |
| 直接值 | p(1) | padding: calc(1 * 1px) |
| 原生长度 | (padding:0.5rem) | padding: 0.5rem |
生成的 CSS
@layer theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .p-md { padding: var(--spacing-md) } .p\(1\) { padding: calc(1 * 1px) } .\(padding\:0\.5rem\) { padding: 0.5rem }}页面共用的节奏，例如列间距、内边距与区段间距，使用 token。直接值长度以像素表示，所以 p(1) 是一像素内边距，不是尺度中的一级；适合用于细线与 m(0) 这类重置。其他单位请写成原生声明。完整尺度请见间距，各函数请见直接值。
当某个距离成为反复使用的设计决策，请按角色命名。--spacing-1 这类数字键名会让人误读为直接值 p(1)。
@theme { --spacing-section: 6rem;}<section class="py-section">…</section>px-* 与 py-* 设置逻辑行内与块方向的内边距。实际方向会跟随元素的书写模式：
行内边距随书写模式调整
两个正方形内容框尺寸相同。色带标出实际 16px 的 padding-inline 区域。
文字说明
- px(16) 输出 padding-inline: calc(16 * 1px)。在 horizontal-tb 中，两侧内边距位于左、右。
- 在 vertical-rl 中，行内轴为垂直方向，因此相同类将内边距放在上、下。
- Master CSS 的 x、y 名称指行内轴和块轴。物理 t、r、b、l 名称则保留物理方向。
p-* 设置四边。只有一侧内边距需要不同时，再加上指定该侧的 class：
单边覆盖仅改变该边
色带是检查辅助线，并非生成的背景色。两个示例使用真实的预设 CSS，内容尺寸也相同。
文字说明
- p(24) 为内容四边设置 24px 内边距。
- 加入 pt(8) 将上方内边距改为 8px。相同条件下，其余三边保持 24px，不受两个 HTML 类顺序影响。
#用容器尺寸限制宽度
w-、max-w-、h-、min-w- 与 basis- 读取 --container-* token，因此 max-w-5xl 对应 max-width: var(--container-5xl)。填满与固有尺寸则是固定工具类：w-full、w-fit、w-max 与 w-min 始终设置 100%、fit-content、max-content 与 min-content，项目中的 --container-full token 不会改变它们。
生成的 CSS
@layer theme { :root, :host { --container-5xl: 64rem }}@layer utilities { .max-w-5xl { max-width: var(--container-5xl) } .w-full { width: 100% } .w-fit { width: fit-content }}容器 token 只设置长度，不会移动容器查询的阈值。完整尺度请见容器尺寸。
宽度上限为较小父元素保留弹性
上限是最大值，不是固定宽度。图中宽度采用同一比例；标签描述限制条件，而非视口像素。
文字说明
两个父元素包含相同的限宽内容框。较小父元素限制内容宽度；较大父元素则在达到最大宽度的内容框周围留下空间。
#从页面外层容器开始
让外层容器填满父元素，用容器尺寸设置上限、居中，并从间距尺度中选择两侧留白：
<main class="w-full max-w-7xl mx-auto px-md px-xl@md">…</main>生成的 CSS
@layer theme { :root, :host { --spacing-md: 1rem; --spacing-xl: 2rem; --container-7xl: 80rem }}@layer utilities { .mx-auto { margin-inline: auto } .max-w-7xl { max-width: var(--container-7xl) } .px-md { padding-inline: var(--spacing-md) } .w-full { width: 100% } @media (width >= 64rem) { .px-xl\@md { padding-inline: var(--spacing-xl) } }}外层容器负责页面对齐，内部网格则负责内容之间的关系。
#建立列网格
grid-cols(<count>) 建立等宽列网格，grid-col-span(<count>) 让条目跨越数列。断点改变列数时，也要在相同断点调整跨列数。
网格增加为 12 列，但文章仍只跨四列，留下四个空列。
<section class="grid-cols(4) gap-lg grid-cols(12)@md"> <article class="grid-col-span(4)">…</article> <aside class="grid-col-span(4)">…</aside></section>文章在相同断点改为跨八列。
<section class="grid-cols(4) gap-lg grid-cols(12)@md"> <article class="grid-col-span(4) grid-col-span(8)@md">…</article> <aside class="grid-col-span(4)">…</aside></section>生成的 CSS
@layer utilities { .grid-cols\(4\) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) } @media (width >= 64rem) { .grid-cols\(12\)\@md { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) } } @media (width >= 64rem) { .grid-col-span\(8\)\@md { grid-column: span 8/span 8 } }}跨列项目包含轨道间距
320px 网格使用 grid-cols(3)、gap(16) 和 grid-col-span(2)。标尺呈现实际 CSS 几何尺寸，并非任意比例。
文字说明
- 可用宽度为 320px。扣除两个 16px 间距后，288px 平分给三条 96px 轨道。
- 跨两条轨道的项目覆盖 96px + 16px + 96px，即 208px。它与第三条轨道之间仍保留下一个 16px 间距。
- 改变列数可能改变轨道宽度；请在同一断点一并更新相关跨度。
两个轴向需要不同间距 token 时，使用 col-gap-* 与 row-gap-*。详见网格轨道。
#指定显式轨道
需要固定或混合轨道时，写出原生 grid-template-columns 值。使用 | 分隔轨道，生成 CSS 时会转为空格：
<section class="grid (grid-template-columns:4.5rem|minmax(0,1fr)) gap-md"> <nav>…</nav> <main class="min-w(0)">…</main></section>生成的 CSS
@layer utilities { .min-w\(0\) { min-width: calc(0 * 1px) } .\(grid-template-columns\:4\.5rem\|minmax\(0\,1fr\)\) { grid-template-columns: 4.5rem minmax(0, 1fr) }}min-w(0) 让主要区域可缩小至内容宽度以下。普通内容保持等宽列与跨列设置；应用外壳与分割面板再使用显式轨道。
可收缩轨道仍需要文本换行
minmax(0,1fr) 让轨道可收缩；文本仍需适当的换行策略。高度由内容决定。
文字说明
两条等宽网格轨道比较短标签与会换行的长标签。第二行高度增加，轨道边界仍保持对齐。
#用较长内容验证布局
调整尺寸跨越各断点，同时检查网格列数与子条目的跨列数。使用更长的标题与任务标签，确认内容能垂直增长。固定尺寸留给需要测量的对象或刻意设置的视口；页面卡片通常只需内边距与宽度限制。
使用键盘操作预览中的任务复选框，并打开各区段链接。内容换行时布局仍应可用；为了塞进固定高度卡片而缩小文本，只会掩盖真正的限制。