用 repeat(4, 1fr) 定列，0 按钮设 grid-column: span 2，禁用 width/min-width；= 键用 grid-row: 4 / -1 或命名线锚定；gap 控制间距，box-sizing: border-box 防点击错位；calc() 在 grid-template-columns 中不支持百分比，应避免。
grid-template-columns 怎么写才能让按钮对齐又不拉伸
计算器按钮需要等宽、等高，且整体占满容器，不能靠 flex 那套“均分剩余空间”的逻辑——grid 得用固定轨道。常见错误是写成 repeat(4, 1fr)，结果数字键被 = 或 0 拉变形。真正稳的写法是：用 repeat(4, 1fr) 定列数，但把 0 按钮设为 grid-column: span 2，再配合 justify-items: stretch（默认值，不用显式写）。这样所有按钮按轨道对齐，0 自动跨两列，其他列自动等宽。
注意：别给按钮设 width 或 min-width，否则会破坏 grid 的轨道约束；如果容器宽高比不固定，加 aspect-ratio: 1 / 1 到 grid 容器上更可控。
grid-row / grid-column 跨度怎么配才不会错位
计算器里 = 键通常要跨到底部两行（运算符列+等号行），但很多人只写 grid-row: span 2，忘了它默认从当前行开始向下跨——如果没显式指定起始行，浏览器按源顺序自动分配，容易偏移。正确做法是：给 = 显式设 grid-row: 4 / -1（从第 4 行线到最后一行线），或更稳妥地用命名线：grid-row: equals-start / equals-end，并在 grid-template-rows 里定义好这些线。
常见错误现象：= 按钮悬在半空、盖住其他按钮、或整个网格错位。本质是跨度起点没锚定，源顺序干扰了隐式行分配。
立即学习“前端免费学习笔记（深入）”；
-
grid-column和grid-row的值必须是整数线号或命名线，不能是span 2单独出现 - 所有按钮都应有明确的
grid-row和grid-column，避免依赖隐式网格 - 用
grid-auto-flow: dense会加剧错位，计算器界面禁用
按钮点击区域小、响应慢？检查 grid 容器的 gap 和 box-sizing
看着排得整齐，点起来却经常点空，大概率是 gap 太大 + 按钮内边距没压住。Grid 的 gap 是轨道之间的空隙，不是按钮的 margin；如果按钮自己又设了 padding，视觉间距就翻倍，手指操作时容易误判。正确节奏是：用 gap: 8px 控制轨道间隔，按钮内部用 padding: 12px 0（垂直留白够点击，水平靠 grid 列轨道撑开），再统一加 box-sizing: border-box。
兼容性注意：老版 Safari 对 gap 支持弱，若需兼容 iOS 15 以下，得用 margin 模拟，但会增加布局复杂度；现代项目可放心用 gap。
为什么 calc() 在 grid-template-columns 里总失效
想让按钮宽度随屏幕变但保留固定像素边框？比如列宽写成 calc((100% - 3 * 8px) / 4) —— 这在 grid-template-columns 里直接报错。因为 grid-template-* 不接受含百分比的 calc()，除非整个表达式能被解析为固定长度或 fr 单位。解决方法只有两个：
- 放弃动态列宽，用
repeat(4, minmax(0, 1fr))+ 容器width控制整体尺寸 - 改用
inline-size+container queries（较新，支持有限）
硬塞 calc() 不仅无效，还会让整条 grid-template-columns 规则被浏览器忽略，退化成单列显示——这是最隐蔽的坑，看不出 CSS 报错，但界面全乱。
实际做计算器时，最易被忽略的是按钮的 font-size 和 line-height 对齐影响：哪怕 grid 轨道完美，文字上下偏移也会让人觉得“没居中”。建议所有按钮统一设 display: flex; align-items: center; justify-content: center;，别只靠 text-align 和 line-height。
