弹窗外层必须用 fixed + flex 居中，而非 Grid；.modal-content 才应设 Grid，配 grid-template-rows: max-content 1fr max-content、max-height: 80vh、overflow: hidden 及 modal-body 的 min-height: 0 和 overflow-y: auto。
直接给弹窗外层加 display: grid 是错的，会导致居中失效、遮罩错位、Safari 塌陷——Grid 只管内部空间划分，不管浮层定位。
弹窗整体必须用 fixed + flex 居中，不是 Grid
外层容器（比如 .modal）要设 position: fixed; inset: 0; 锚定视口，再用 display: flex; align-items: center; justify-content: center; 居中。这是唯一跨浏览器稳定的方案。如果这里用了 display: grid，grid-template-rows: 1fr auto 1fr 看似能居中，但会破坏遮罩层渲染逻辑，iOS 上尤其容易出问题。
.modal-content 才是真正该设 Grid 的地方
把实际弹窗框（.modal-content）作为 Grid 容器，负责标题、内容、按钮三块区域的分配。关键配置如下：
-
grid-template-rows: max-content 1fr max-content—— 首尾用max-content固定高度，中间用1fr吸收剩余空间 - 必须配
max-height: 80vh和overflow: hidden，否则1fr没有计算边界，长内容会撑爆视口 -
.modal-body要加overflow-y: auto和min-height: 0，否则 Grid 子项最小尺寸限制会让它塌缩 - 别写
grid-template-rows: auto 1fr auto，auto在长内容下等于“无限高”，按钮直接被挤走
隐藏标题或按钮时，必须用 display: none
在移动端用媒体查询隐藏 .modal-header 或 .modal-footer，只能用 display: none。如果用 visibility: hidden 或 opacity: 0，对应轨道仍占位，Grid 会把 1fr 分给“看不见但还在”的区域，导致中间内容区变窄、按钮错位。
立即学习“前端免费学习笔记（深入）”；
例如：@media (max-width: 767px) { .modal-header { display: none; } } —— Grid 自动重排，1fr 会完整分给剩下的两块。
按钮组横跨全宽，别碰 width，用 grid-column: 1 / -1
.modal-footer 默认继承列轨道，但按钮文字过长或带图标时容易溢出。强行设 width: 100% 在 Safari 中可能触发渲染 bug，导致换行错乱。
正确做法是给 .modal-footer 加 grid-column: 1 / -1，让它横跨所有列轨道，不受中间内容区宽度影响。如果还需右对齐按钮，再加 justify-self: end，不要用 text-align: right 或 margin-left: auto，语义不清且易冲突。
最常漏掉的是 max-height 和 min-height: 0，这两处一缺，滚动就失效，整个 Grid 结构看起来“没反应”。不是代码写错了，而是计算前提不存在。
