用grid-template-columns: repeat(4, 1fr)和grid-template-rows: repeat(5, 1fr)定义轨道，通过grid-column/grid-row精确控制“0”“=”等跨格按键，禁用width/height改用fr和gap，统一box-sizing: border-box、flex居中、min-size热区，并用@supports降级兼容旧浏览器。
Grid布局怎么让计算器按键等宽等高又贴边
直接用 grid-template-columns: repeat(4, 1fr) 和 grid-template-rows: repeat(5, 1fr) 是最稳的起点，但实际排布会发现“0”键占两列、“=”键占两行——这时候不能靠 colspan 那套逻辑，得用 grid-column 和 grid-row 显式控制。
常见错误是给所有按键统一设 width/height，结果在不同屏幕下错位或留白；Grid 的优势恰恰在于放弃固定尺寸，改用轨道分配空间。
- “0”键写成
grid-column: 1 / -1（从第1列到最后一列）不如明确写grid-column: 2 / 4，避免和隐式网格线混淆 - “=”键建议用
grid-row: 2 / 6（跨4行），而不是grid-row: 2 / span 4，后者在动态增删行时容易偏移 - 外层容器必须设
display: grid且定义好行列模板，否则子元素的grid-column无效
为什么 calc() 在 Grid 轨道里经常失效
比如想写 grid-template-rows: calc(100vh - 60px) 1fr 来留出标题栏高度——这在 Grid 中不被支持。CSS Grid 的 grid-template-* 属性只接受长度、百分比、fr 或 minmax()，不解析 calc()。
真正能用 calc() 的地方是单个轨道的尺寸值，比如 grid-template-columns: 80px calc(100% - 80px)，但要注意：百分比是相对于网格容器宽度算的，不是视口。
- 要撑满减去顶部导航的高度，正确做法是用
grid-template-rows: [top] 60px [main] 1fr，再配合容器的height: calc(100vh - 60px) - 别在
minmax(min, max)里嵌calc()，部分旧版 Safari 会忽略整条声明 - 如果用
fr单位，所有同级轨道按比例分剩余空间，“0”键和“1”键自然等高，不用额外 hack
按钮点击区域小、响应慢？检查 Grid gap 和 box-sizing
很多人加了 gap: 8px 后发现按键之间空太大，于是把 padding 往回调，结果点不到边缘——根本原因是没设 box-sizing: border-box，导致 padding + gap 双重挤压内容区。
另一个隐形问题是：Grid 容器默认 align-items: stretch，但按钮若含文字，默认 line-height 或 font-size 不一致，视觉上就“不齐”。不是 Grid 没排好，是内容渲染没对齐。
- 所有按键统一加
box-sizing: border-box，再设padding: 0，用gap控制间距，避免尺寸失控 - 文字居中用
display: flex; align-items: center; justify-content: center，比text-align+line-height更可靠 - 移动端点击热区至少 44×44px，可给按键设
min-width: 44px; min-height: 44px，Grid 会自动按轨道拉伸，不破坏布局
IE11 兼容性下 Grid 计算器还能用吗
不能。IE11 的 Grid 实现是旧草案（2012 年 spec），不支持 grid-area、gap、fr 单位，连 grid-column-start 都要写成 -ms-grid-column。强行兼容会让代码膨胀一倍，且行为不一致。
现实方案只有两个：一是彻底放弃 IE11（2024 年后多数业务已这么做），二是降级为 Flex 布局——Flex 对计算器这种单向为主、仅少数跨格的结构，用 flex-wrap + flex-basis 也能实现，只是“0”键需要额外 width: 200% 并设父容器 overflow: hidden。
- 如果必须支持 IE11，别用
display: grid，改用display: -ms-flexbox，并用 Autoprefixer 自动补全 - 现代项目建议用
@supports (display: grid)包一层，IE11 自动 fallback 到 Flex 版本 - 测试时别只看 Chrome，真机测 iOS Safari 14.5 以下版本——它支持 Grid 但不支持
subgrid，不过计算器用不到这个
Grid 做计算器排布本身不难，难的是在“视觉对齐”“点击可用”“跨浏览器”三者间不妥协。最容易被忽略的，其实是按钮的 user-select: none ——不然长按会选中文本，误触感立刻变差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
