本文讲解如何在 css grid 布局中实现标签（label）在状态切换（如选中时放大加粗）后仍保持严格的垂直与水平居中对齐，关键在于**脱离内容驱动的行高依赖，改用显式、固定且一致的网格行高定义**。
在使用 CSS Grid 构建标签网格（例如用于表单选项、图标按钮或数字面板）时，一个常见痛点是：当通过 :checked 等伪类动态改变某项文本的 font-size 和 font-weight 时，该元素视觉尺寸突变，导致其在网格单元格中“上浮”或“下沉”，破坏整体对齐——尤其是垂直方向的居中一致性。
问题根源在于你当前的样式中：
grid-template-rows: repeat(3, 1fr); /* 行高由内容撑开 */
label {
height: 1.6rem; /* 固定 label 自身高度，但不约束 grid 行高 */
}1fr 是弹性单位，它会随单元格内内容（即 label 的字体大小）变化而重新分配空间。当某个 label 变为 1.6rem 字号时，其行内盒（inline box）高度增大，所在网格行被拉伸，而其他未变化的 label 所在行则保持较矮，造成视觉错位。
✅ 正确解法：将行高控制权从内容收归网格容器本身，使用固定高度替代 1fr：
立即学习“前端免费学习笔记（深入）”；
div {
display: inline-grid;
/* ✅ 关键修改：用固定高度代替 1fr，确保所有行高度严格一致 */
grid-template-rows: repeat(3, 1.6rem); /* 与 label 默认视觉高度匹配 */
grid-auto-flow: column;
align-items: center; /* 垂直居中（基于固定行高） */
justify-items: center; /* 水平居中（推荐显式声明） */
text-align: center;
/* 可选：防止字体放大时溢出 */
overflow: hidden;
}同时，移除 label 上冗余的 height 和 width（除非你需要点击热区扩展），让其自然内联渲染：
label {
/* 删除 height/width，避免与 grid 行高冲突 */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
}状态样式也应优化为更健壮的选择器（原 input:checked ~ div [for=ck] 依赖 DOM 顺序，易断裂）：
/* 推荐：使用 :has()（现代浏览器支持）或结构化绑定 */
input#ck:checked + br + div label[for="ck"] {
font-size: 1.6rem;
font-weight: 900;
line-height: 1; /* 避免因字号增大导致行高额外增加 */
}? 注意事项与最佳实践：
- 固定 grid-template-rows 高度（如 1.6rem）是稳定对齐的前提，该值建议略大于最大字号对应的行高（可借助 line-height: 1 + padding 微调）；
- align-items: center 在固定行高下才能真正生效；若仍用 1fr，该属性仅对“弹性剩余空间”起作用，无法对抗内容撑高；
- 如需兼容旧浏览器（不支持 :has()），可改用 JavaScript 切换 label 的 .active 类，或调整 HTML 结构使
- 若网格列数动态，建议搭配 grid-auto-columns: 1.6rem 和 justify-content: center 保证横向均匀分布。
总结：Grid 的对齐稳定性不取决于子元素的尺寸控制，而取决于容器对轨道（track）的显式定义。放弃“让内容决定布局”，转而“用布局约束内容”，是解决此类动态样式对齐问题的核心范式。
