本文讲解如何在 css grid 布局中实现点击选中时标签文字放大加粗，同时保持所有网格项（含动态变化尺寸的元素）在水平与垂直方向上严格对齐，关键在于用固定行高替代 `1fr` 自适应高度，并避免依赖子元素 `height` 控制布局。
在使用 CSS Grid 构建标签网格（如表单选项、图标面板等）时，一个常见需求是：当用户点击某个
你遇到的问题本质是：
✅ 水平居中可通过 justify-items: center 轻松解决；
❌ 垂直对齐却因 font-size 动态变化导致行高波动而失效；
❌ 使用 grid-template-rows: repeat(3, 1fr) 让每行高度由内容撑开，一旦某 label 字号变大（如 1.6rem → 1.6rem + 更大行内盒高度），整行就会“跳动”，破坏视觉稳定性。
✅ 正确解法：固定行高 + 内容居中
将 grid-template-rows 从弹性单位 1fr 改为明确的固定高度值（如 1.6rem），并配合 align-items: center，即可确保所有 grid item 无论内部文字大小如何变化，其内容始终在单元格内垂直居中，且行高恒定不抖动：
div {
display: inline-grid;
/* ✅ 关键修改：用固定高度替代 1fr */
grid-template-rows: repeat(3, 1.6rem);
grid-auto-flow: column;
align-items: center; /* 垂直居中（基于固定行高） */
justify-items: center; /* 水平居中 */
}
label {
/* ❌ 移除 height: 1.6rem —— 它会限制内容区域，干扰字体缩放 */
/* ✅ 让 label 自然包裹文字，由 grid 行高统一约束 */
cursor: pointer;
}
input:checked ~ div [for="ck"] {
font-size: 1.6rem;
font-weight: 900;
/* 可选：微调行高以适配大字体（如需更精确基线对齐） */
line-height: 1.2; /* 避免过大行高造成上下留白失衡 */
}? 为什么移除 label { height: 1.6rem }？ 显式设置 height 会强制截断或挤压内容，当 font-size 增大时，文字可能溢出或触发 overflow 行为；而让 grid 行高承担“容器约束”职责，label 作为内容盒子自由伸缩，再由 align-items: center 居中定位，才是语义清晰、行为可控的现代布局方式。
? 进阶提示：兼容不同字体与可访问性
- 若需更严格的基线对齐（如混合图标与文字），可改用 align-items: baseline，但务必配合 line-height 统一控制；
- 为保障可访问性，建议为 label 添加 user-select: none 和焦点样式（:focus-visible），并确保 for 属性正确绑定 id；
- 在响应式场景中，可用 clamp() 替代固定值，例如：grid-template-rows: repeat(3, clamp(1.4rem, 4vw, 1.6rem));
✅ 总结
| 问题现象 | 根本原因 | 解决方案 |
|---|---|---|
| 点击后标签“上跳” | 1fr 行高随内容膨胀 | ✅ grid-template-rows: repeat(n, |
| 水平/垂直不对齐 | 子元素 height 干扰对齐 | ✅ 移除 label 高度，交由 grid 容器控制 |
| 文字放大后拥挤或留白 | 缺少 line-height 调优 | ✅ 添加合理 line-height 保证视觉密度 |
只要把“行高控制权”从内容元素（label）收归到容器（grid），就能一劳永逸地兼顾动态样式与静态布局稳定性。
