本文讲解如何通过固定网格行高而非依赖内容高度，解决 grid 容器内标签（label）选中后因字体放大导致的垂直对齐偏移问题，确保所有项目始终居中对齐且行高稳定。
在使用 CSS Grid 布局展示标签（如 <label>）时，一个常见痛点是：当用户点击某个标签触发 font-size 和 font-weight 变化（例如变大加粗），其所在网格单元格的高度会动态增长，进而破坏整行项目的垂直对齐——即使设置了 align-items: center，效果也会因内容高度不一致而失效。
根本原因在于您当前使用了 grid-template-rows: repeat(3, 1fr)，这表示每行高度由内容撑开并均分剩余空间；而 label 自身又设置了 height: 1.6rem，造成样式冗余与冲突。更关键的是，当文本放大后，实际行高被重新计算，导致“视觉跳跃”。
✅ 正确解法：将行高控制权从内容转移到网格容器本身，即用固定高度定义 grid-template-rows，而非依赖 fr 单位或元素 height：
div {
display: inline-grid;
grid-template-rows: repeat(3, 1.6rem); /* ✅ 固定每行高度为 1.6rem */
grid-auto-flow: column;
align-items: center; /* 垂直居中（基于固定行高） */
justify-items: center; /* 水平居中（推荐显式声明） */
text-align: center;
}同时，移除 label 的显式 height 设置（否则可能引发盒模型冲突）：
立即学习“前端免费学习笔记（深入）”；
label {
/* height: 1.6rem; ← 删除这一行 */
width: 1.6rem;
/* 可选：添加 padding 或 line-height 确保小字号文本也垂直居中 */
line-height: 1.6rem;
}对于选中态样式，保持简洁有效即可：
input:checked ~ div [for="ck"] {
font-size: 1.6rem;
font-weight: 900;
/* 不需调整 height/line-height —— 行高已由 grid-template-rows 锁定 */
}⚠️ 注意事项：
- 1fr 适用于弹性分配空间的场景，但此处需确定性高度控制，故必须改用 px、rem 等绝对/相对单位；
- 若需响应式适配，可用 clamp() 替代固定值，例如 grid-template-rows: repeat(3, clamp(1.4rem, 4vw, 1.6rem))；
- 避免对 label 同时设置 height 和 font-size 变化，易引发基线偏移；优先依赖 line-height + align-items: center 组合实现精准垂直居中；
- justify-items: center 是水平居中的推荐方式（作用于所有 grid items），比 text-align: center 更可靠（后者仅影响内联内容）。
总结：Grid 的对齐稳定性源于容器层的高度约束，而非子元素的尺寸控制。固定 grid-template-rows 高度，配合 align-items: center，即可在字体动态变化时始终保持视觉一致性——这是构建可预测、专业级表单网格布局的关键实践。
