布局
Gap 间隙
Flex / Grid 子项间隙；pvs-gap-* pvs-gap-x-* pvs-gap-y-*。
Flex 间隙
gap-2BC
gap-8BC
<div class="pvs-flex pvs-gap-2 pvs-p-3 pvs-border">
<span class="pvs-p-2 pvs-bg-surface-muted pvs-border">gap-2</span>
<span class="pvs-p-2 pvs-border">B</span>
<span class="pvs-p-2 pvs-border">C</span>
</div>
<div class="pvs-flex pvs-gap-8 pvs-p-3 pvs-border pvs-mt-3">
<span class="pvs-p-2 pvs-bg-surface-muted pvs-border">gap-8</span>
<span class="pvs-p-2 pvs-border">B</span>
<span class="pvs-p-2 pvs-border">C</span>
</div>Grid 间隙
1
2
3
<div class="pvs-grid pvs-gap-4" style="--pvs-grid-columns:3">
<div class="pvs-p-3 pvs-border pvs-bg-surface-muted pvs-text-center">1</div>
<div class="pvs-p-3 pvs-border pvs-text-center">2</div>
<div class="pvs-p-3 pvs-border pvs-text-center">3</div>
</div>统一间隙
pvs-gap-* 同时设置 row-gap 与 column-gap。
gap-4项 B项 C
<div class="pvs-flex pvs-gap-4 pvs-flex-wrap pvs-p-3 pvs-border">
<span class="pvs-p-2 pvs-border">gap-4</span>
<span class="pvs-p-2 pvs-border">项 B</span>
<span class="pvs-p-2 pvs-border">项 C</span>
</div>轴向间隙
pvs-gap-x-* 列隙 · pvs-gap-y-* 行隙。
x 8
y 2
B
C
<div class="pvs-grid pvs-gap-x-8 pvs-gap-y-2 pvs-p-3 pvs-border" style="--pvs-grid-columns:2">
<div class="pvs-p-2 pvs-bg-surface-muted pvs-border">x 8</div>
<div class="pvs-p-2 pvs-border">y 2</div>
<div class="pvs-p-2 pvs-border">B</div>
<div class="pvs-p-2 pvs-border">C</div>
</div>CSS 变量
Grid 也可用 --pvs-gap 内联覆盖。
2rem
gap
<div class="pvs-grid" style="--pvs-grid-columns:2;--pvs-gap:2rem">
<div class="pvs-p-2 pvs-border">2rem</div>
<div class="pvs-p-2 pvs-border">gap</div>
</div>响应式
移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见 响应式。
ab
<div class="pvs-flex pvs-gap-2 md:pvs-gap-6 lg:pvs-gap-12 pvs-p-3 pvs-border">
<span class="pvs-p-1 pvs-border pvs-bg-surface-muted">a</span>
<span class="pvs-p-1 pvs-border">b</span>
</div>类名速查
| 类 | 样式 |
|---|---|
pvs-gap-0 … pvs-gap-24 | 行列同隙 |
pvs-gap-x-* | column-gap |
pvs-gap-y-* | row-gap |
lg:pvs-gap-8 | 响应式间隙 |