应使用 grid-template-rows: repeat(3, 1.6rem) 等带单位数值定义固定行高，避免用 1fr；align-items: center 依赖显式行高才能稳定居中，label 不应设 height，而由网格统一约束空间。
用 grid-template-rows 定义固定行高，别碰 1fr
固定行高必须显式声明，1fr 会随内容伸缩，失去“固定”意义。推荐写法是 grid-template-rows: repeat(3, 1.6rem) 这类带单位的数值，而不是 repeat(3, 1fr)。
常见错误是误以为 align-items: center 能“撑开”行高——它只负责居中，不控制容器尺寸。如果行高没定死，文字放大后可能挤出、错位或触发滚动条。
-
1.6rem建议与字体默认font-size匹配（如16px对应1rem），确保视觉一致 - 避免混用
min-height或height: 100%在 grid 容器上，它们可能干扰行高计算 - 若需响应式，可用
clamp()替代固定值，例如clamp(1.4rem, 1.6rem, 1.8rem)
align-items: center 是垂直居中的关键，但依赖固定行高才能稳定
align-items: center 在 Grid 中对齐的是“单元格内容”，不是整行。它的效果是否精准，取决于该单元格是否有明确高度约束——也就是你设的 grid-template-rows 值。
如果你删掉 grid-template-rows 改用 grid-auto-rows: 1.6rem，也能生效，但要注意：只有新增的隐式行才受控，显式定义的行优先级更高。
- 显式定义（
grid-template-rows）更可控，适合已知行数的布局（如表单标签组、图标网格） -
align-items: center对input、label、span等内联元素同样有效，无需额外包裹 - 不要给子元素设
margin-top或line-height来“模拟”居中——这会和align-items冲突，导致上下偏移
为什么不能给 label 设 height？
显式设置 label { height: 1.6rem } 是典型反模式。它会强制截断内容、干扰字体缩放、破坏可访问性，且和 Grid 的行高约束重复打架。
正确做法是让 label 自然包裹文字，由 Grid 行高统一约束其可用空间，再靠 align-items: center 居中定位。这样既语义清晰，又适配系统字体放大、深色模式等场景。
- 移除所有
height、line-height（除非用于微调大字号基线） - 需要字体变大时，只改
font-size，让 Grid 行高保持不变或同步调整 - 若大字号下文字贴顶，可加
line-height: 1.2到激活态样式里（如input:checked ~ div [for="ck"]），而非全局设
place-items: center 可以替代，但注意兼容性和粒度
place-items: center 是 justify-items: center + align-items: center 的简写，在现代浏览器中完全可用。但它是一次性作用于所有子项，缺乏单独控制水平/垂直的能力。
如果你后续要让某列左对齐、某行底对齐，就得拆回两个属性。所以初期用 place-items 快速起步没问题，但上线前建议评估是否需要更细的控制权。
- IE 不支持
place-items，如需兼容，必须写全justify-items和align-items -
place-items不影响grid-template-areas中的命名区域对齐逻辑 - 它对空单元格也生效，若某些格子无内容，仍会保留居中占位空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
