本文详解如何在 css grid 布局中，通过固定网格行高（而非依赖 `1fr` 或内容撑高）来解决标签文字放大后垂直错位的问题，确保选中态（加粗放大）与未选中态始终保持严格的垂直居中对齐。
在使用 CSS Grid 构建等距标签网格（如数字选择器、选项卡片等）时，一个常见需求是：用户点击标签触发关联的 （checkbox/radio）后，该标签文字需视觉强化——例如增大字号、加粗显示。但若仅靠 font-size 变化而未约束容器高度，文字放大将导致行高动态膨胀，破坏原有对齐，尤其在 align-items: center 下表现为上下跳动或偏移。
根本原因在于你当前的样式中：
grid-template-rows: repeat(3, 1fr); /* 行高由内容决定 */
label {
height: 1.6rem; /* 此处 height 对 grid item 无实际约束力 */
}
1fr 是弹性单位，会随内容尺寸（尤其是放大后的字体行高）重新分配空间；而给 label 设置 height 并不能强制其父 grid row 高度不变——因为 grid 的行高优先级高于子项显式高度。
✅ 正确解法：将行高控制权交还给 grid 容器本身，使用固定值（如 1.6rem）定义 grid-template-rows，而非 1fr：
div {
display: inline-grid;
grid-template-rows: repeat(3, 1.6rem); /* ✅ 固定每行高度 */
grid-auto-flow: column;
align-items: center; /* 垂直居中（基于固定行高） */
justify-items: center; /* 水平居中（推荐显式声明） */
text-align: center;
gap: 0.25rem; /* 可选：增强可读性 */
}
同时移除 label 上冗余的 height 和 width（它们可能干扰内联元素的基线对齐），让文本自然居中：
label {
/* 删除 height/width，避免与 grid 行高冲突 */
cursor: pointer;
user-select: none;
}
针对选中态的样式，保持语义清晰与性能友好：
input#ck:checked ~ div [for="ck"] {
font-size: 1.6rem;
font-weight: 900;
line-height: 1.6rem; /* ✅ 显式匹配行高，防行内高度溢出 */
}
⚠️ 注意事项：
- line-height 应与 grid-template-rows 的单行高度一致（如均为 1.6rem），确保大号文字在固定容器内垂直居中；
- 避免对 label 使用 display: block 或 flex 等额外布局模式，除非必要——这会增加复杂度并可能干扰 grid 的对齐逻辑；
- 若需响应式适配，可用 clamp() 替代固定值：grid-template-rows: repeat(3, clamp(1.4rem, 4vw, 1.6rem));
最终效果：所有标签无论是否选中，均严格位于各自网格单元的几何中心，无跳动、无偏移，水平与垂直对齐完全稳定——这才是可控、可维护的 UI 交互基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
