布局
Flex · Grid 弹性栅格
开源布局：分栏用 Grid，对齐用 Flex。默认 12 轨；pvs-col-lg-* / pvs-col-xl-* 在对应断点以下满宽堆叠。
选型口诀（常见 flex 列写法用 flex 模拟栅格；PivCSS 用原生 Grid）
| 场景 | 用 |
|---|---|
| 三列卡片、主侧栏、整页分栏 | pvs-grid + pvs-col-* |
| 导航条、按钮组、单行对齐 | pvs-flex + justify/items |
| 表单字段竖排 | pvs-stack 或 pvs-flex-col |
| 标签 / 芯片横排换行 | pvs-cluster |
移动优先
PivCSS 不是桌面优先：先写小屏，再用 md: / lg: 或 pvs-col-lg-* 加大屏分栏。详表见 响应式 · 两种列宽写法。
| 推荐写法 | 手机 | 桌面 |
|---|---|---|
pvs-col-lg-8 + pvs-col-lg-4 | 上下堆叠满宽 | 8+4 主侧栏 |
pvs-col-full md:pvs-col-6 lg:pvs-col-4 | 单列 | 两列 → 三列 |
pvs-flex-col md:pvs-flex-row | 竖排 | 横排工具条 |
等分三列
pvs-col-4 × 3：各断点都跨 4 轨（小屏不会自动满宽）。生产环境请改用 pvs-col-lg-4 或渐进写法。
col-4
col-4
col-4
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.75rem">
<div class="pvs-col-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">col-4</div>
<div class="pvs-col-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">col-4</div>
<div class="pvs-col-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">col-4</div>
</div>等分三列（移动优先）
pvs-col-lg-4 × 3：<992px 各满宽堆叠，lg 起一行三等分。
lg-4
lg-4
lg-4
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.75rem">
<div class="pvs-col-lg-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">lg-4</div>
<div class="pvs-col-lg-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">lg-4</div>
<div class="pvs-col-lg-4 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">lg-4</div>
</div>主侧栏 8 + 4
pvs-col-lg-8 + pvs-col-lg-4：lg 以下两列各满宽堆叠。
主内容 · lg-8
侧栏 · lg-4
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:1rem">
<div class="pvs-col-lg-8 pvs-p-4 pvs-border pvs-bg-surface-muted">主内容 · lg-8</div>
<div class="pvs-col-lg-4 pvs-p-4 pvs-border">侧栏 · lg-4</div>
</div>col-lg 与响应式前缀
pvs-col-lg-*：内置「移动满宽、lg 起按跨度」；md:pvs-col-6：仅 ≥md 时跨 6 轨。二者可组合。
lg-8 · md 起 col-6
lg-4 · md 起 col-6
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.5rem">
<div class="pvs-col-lg-8 md:pvs-col-6 pvs-p-2 pvs-border pvs-bg-surface-muted">lg-8 · md 起 col-6</div>
<div class="pvs-col-lg-4 md:pvs-col-6 pvs-p-2 pvs-border">lg-4 · md 起 col-6</div>
</div>col-xl（v1.1 · ≥1200px）
pvs-col-xl-*：<1200px 各满宽堆叠，xl 起按跨度。适合宽屏四列或「lg 三列 → xl 四列」再收紧。
xl-3
xl-3
xl-3
xl-3
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.75rem">
<div class="pvs-col-xl-3 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">xl-3</div>
<div class="pvs-col-xl-3 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">xl-3</div>
<div class="pvs-col-xl-3 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">xl-3</div>
<div class="pvs-col-xl-3 pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">xl-3</div>
</div>与 xl:pvs-col-3 区别：前者内置 xl 以下满宽；后者需配合 pvs-col-full 等先写小屏。
满宽行 + 子列
pvs-col-full 占满 12 轨，下方再接分栏。
页头 col-full
col-6
col-6
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.75rem">
<div class="pvs-col-full pvs-p-3 pvs-border pvs-bg-primary" style="color:#fff">页头 col-full</div>
<div class="pvs-col-6 pvs-p-3 pvs-border">col-6</div>
<div class="pvs-col-6 pvs-p-3 pvs-border">col-6</div>
</div>响应式列宽
移动满宽 · md:pvs-col-6 两列 · lg:pvs-col-4 三列（收窄窗口查看）。
A
B
C
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.5rem">
<div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-2 pvs-border pvs-bg-surface-muted">A</div>
<div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-2 pvs-border pvs-bg-surface-muted">B</div>
<div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-2 pvs-border pvs-bg-surface-muted">C</div>
</div>栅格对齐
Grid 单元格对齐：pvs-justify-items-*、pvs-place-items-center、pvs-place-content-center。
justify-items-end
place-items-center
place-content-center
<div class="pvs-grid pvs-justify-items-end pvs-p-4 pvs-border" style="--pvs-grid-columns:12;--pvs-gap:0.5rem;min-height:6rem">
<div class="pvs-col-4 pvs-p-2 pvs-border pvs-bg-surface-muted">justify-items-end</div>
</div>
<div class="pvs-grid pvs-place-items-center pvs-p-4 pvs-border pvs-mt-3" style="--pvs-grid-columns:12;--pvs-gap:0.5rem;min-height:6rem">
<div class="pvs-col-3 pvs-p-2 pvs-border">place-items-center</div>
</div>
<div class="pvs-grid pvs-place-content-center pvs-p-4 pvs-border pvs-mt-3" style="--pvs-grid-columns:12;--pvs-gap:0.5rem;min-height:6rem">
<div class="pvs-col-3 pvs-p-2 pvs-border">place-content-center</div>
</div>自定义轨数
默认 --pvs-grid-columns: 12；可改为 6 轨等，pvs-col-2 在 6 轨下即三等分。
6 轨 · col-2
col-2
col-2
<div class="pvs-grid" style="--pvs-grid-columns:6;--pvs-gap:0.5rem">
<div class="pvs-col-2 pvs-p-2 pvs-border pvs-bg-surface-muted">6 轨 · col-2</div>
<div class="pvs-col-2 pvs-p-2 pvs-border pvs-bg-surface-muted">col-2</div>
<div class="pvs-col-2 pvs-p-2 pvs-border pvs-bg-surface-muted">col-2</div>
</div>主轴对齐 justify
startB
centerB
endB
betweenB
aroundB
evenlyB
<div class="pvs-stack pvs-gap-3">
<div class="pvs-flex pvs-justify-start pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">start</span>
<span class="pvs-p-1 pvs-border">B</span>
</div>
<div class="pvs-flex pvs-justify-center pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">center</span>
<span class="pvs-p-1 pvs-border">B</span>
</div>
<div class="pvs-flex pvs-justify-end pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">end</span>
<span class="pvs-p-1 pvs-border">B</span>
</div>
<div class="pvs-flex pvs-justify-between pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">between</span>
<span class="pvs-p-1 pvs-border">B</span>
</div>
<div class="pvs-flex pvs-justify-around pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">around</span>
<span class="pvs-p-1 pvs-border">B</span>
</div>
<div class="pvs-flex pvs-justify-evenly pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">evenly</span>
<span class="pvs-p-1 pvs-border">B</span>
</div>
</div>交叉轴对齐 items
items-start
高块
items-center
高块
items-end
高块
A
baseline
<div class="pvs-flex pvs-items-start pvs-gap-2 pvs-p-3 pvs-border" style="min-height:5rem">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">items-start</span>
<span class="pvs-py-4 pvs-px-2 pvs-border">高块</span>
</div>
<div class="pvs-flex pvs-items-center pvs-gap-2 pvs-p-3 pvs-border pvs-mt-3" style="min-height:5rem">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">items-center</span>
<span class="pvs-py-4 pvs-px-2 pvs-border">高块</span>
</div>
<div class="pvs-flex pvs-items-end pvs-gap-2 pvs-p-3 pvs-border pvs-mt-3" style="min-height:5rem">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">items-end</span>
<span class="pvs-py-4 pvs-px-2 pvs-border">高块</span>
</div>
<div class="pvs-flex pvs-items-baseline pvs-gap-2 pvs-p-3 pvs-border pvs-mt-3">
<span class="pvs-text-xl pvs-border pvs-px-1">A</span>
<span class="pvs-text-sm pvs-border pvs-px-1 pvs-bg-surface-muted">baseline</span>
</div>flex 伸缩
pvs-flex-1 等分剩余；pvs-flex-grow 占满；pvs-flex-shrink-0 禁止压缩；pvs-flex-none 不伸缩。
flex-1
none
grow
shrink-0
<div class="pvs-flex pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-flex-1 pvs-p-2 pvs-border pvs-bg-surface-muted">flex-1</span>
<span class="pvs-flex-none pvs-p-2 pvs-border">none</span>
</div>
<div class="pvs-flex pvs-gap-2 pvs-p-3 pvs-border pvs-mt-3">
<span class="pvs-flex-grow pvs-p-2 pvs-border pvs-bg-surface-muted">grow</span>
<span class="pvs-flex-shrink-0 pvs-p-2 pvs-border">shrink-0</span>
</div>排序 order
DOM 1 · order-last
DOM 2 · order-first
DOM 3 · order-2
<div class="pvs-flex pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-order-last pvs-p-2 pvs-border pvs-bg-surface-muted">DOM 1 · order-last</span>
<span class="pvs-order-first pvs-p-2 pvs-border">DOM 2 · order-first</span>
<span class="pvs-order-2 pvs-p-2 pvs-border">DOM 3 · order-2</span>
</div>单项对齐 self
只改某一个子项在交叉轴上的位置，不影响兄弟。
self-start
self-center
self-end
<div class="pvs-flex pvs-items-stretch pvs-gap-2 pvs-p-3 pvs-border" style="min-height:5rem">
<span class="pvs-self-start pvs-p-2 pvs-border pvs-bg-surface-muted">self-start</span>
<span class="pvs-self-center pvs-p-2 pvs-border">self-center</span>
<span class="pvs-self-end pvs-p-2 pvs-border">self-end</span>
</div>方向与换行
1row-reverse
上col-reverse
nowrapBC
<div class="pvs-stack pvs-gap-3">
<div class="pvs-flex pvs-flex-row-reverse pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border">1</span>
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">row-reverse</span>
</div>
<div class="pvs-flex pvs-flex-col-reverse pvs-gap-2 pvs-p-3 pvs-border" style="max-width:10rem">
<span class="pvs-p-1 pvs-border">上</span>
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">col-reverse</span>
</div>
<div class="pvs-flex pvs-flex-nowrap pvs-gap-2 pvs-p-3 pvs-border pvs-overflow-x-auto">
<span class="pvs-p-2 pvs-border pvs-flex-shrink-0">nowrap</span>
<span class="pvs-p-2 pvs-border pvs-flex-shrink-0">B</span>
<span class="pvs-p-2 pvs-border pvs-flex-shrink-0">C</span>
</div>
</div>纵向堆叠
pvs-flex-col + pvs-gap-*，或直接用快捷类 pvs-stack。
<div class="pvs-flex pvs-flex-col pvs-gap-3 pvs-p-4 pvs-border" style="max-width:14rem">
<label class="pvs-form-group">
<span class="pvs-label">姓名</span>
<input class="pvs-input" type="text" placeholder="…" />
</label>
<button type="button" class="pvs-btn pvs-btn--primary">提交</button>
</div>stack 与 cluster
开源常用快捷：pvs-stack = 竖排 + gap；pvs-cluster = 横排换行簇。详见 布局 · 间距。
stack字段 B
标签AB
<div class="pvs-flex pvs-gap-4 pvs-flex-wrap">
<div class="pvs-stack pvs-p-3 pvs-border" style="--pvs-gap:0.5rem;max-width:10rem">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">stack</span>
<span class="pvs-p-1 pvs-border">字段 B</span>
</div>
<div class="pvs-cluster pvs-p-3 pvs-border" style="max-width:14rem">
<span class="pvs-badge">标签</span>
<span class="pvs-badge pvs-badge--outline">A</span>
<span class="pvs-badge pvs-badge--outline">B</span>
</div>
</div>响应式
移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见 响应式。
响应式列
列 2
<div class="pvs-grid" style="--pvs-grid-columns:12;--pvs-gap:0.5rem">
<div class="pvs-col-full md:pvs-col-6 lg:pvs-col-4 pvs-p-2 pvs-border pvs-bg-surface-muted">响应式列</div>
<div class="pvs-col-full md:pvs-col-6 lg:pvs-col-8 pvs-p-2 pvs-border">列 2</div>
</div>类名速查
| 类 | 样式 |
|---|---|
pvs-grid | CSS grid · 默认 12 轨 · --pvs-grid-columns |
pvs-col-1 … pvs-col-12 | 跨列跨度 |
pvs-col-lg-* | lg 以下满宽 · lg 起按跨度 |
pvs-col-xl-* | xl 以下满宽 · xl 起按跨度 |
md:pvs-col-* / lg:pvs-col-* / xl:pvs-col-* | 响应式跨列（sm/md/lg/xl 前缀） |
pvs-col-full | 占满整行 |
pvs-justify-items-* pvs-place-* | Grid 单元格/内容对齐 |
pvs-flex pvs-inline-flex | flex 容器 |
pvs-flex-col pvs-flex-wrap pvs-flex-nowrap | 方向与换行 |
pvs-flex-row-reverse pvs-flex-col-reverse | 反向 |
pvs-justify-* pvs-items-* | Flex 主轴/交叉轴 |
pvs-self-* | 单项交叉轴对齐 |
pvs-flex-1 pvs-flex-auto pvs-flex-none | flex 简写 |
pvs-flex-grow pvs-flex-shrink-0 | grow / shrink |
pvs-order-first … pvs-order-last | 排序 |
pvs-stack pvs-cluster | 竖排 / 横排簇快捷 |