不能直接给弹窗外层容器设 display: grid 并指望它居中——那样会破坏遮罩锚定逻辑，导致 safari 塌陷、滚动错位、z-index 失效。
不能直接给弹窗外层容器设 display: grid 并指望它居中——那样会破坏遮罩锚定逻辑，导致 Safari 塌陷、滚动错位、z-index 失效。
为什么 position: fixed + display: grid 一起用会翻车
Grid 只负责划分容器内部空间，不处理定位。如果把 .modal-overlay 同时设为 position: fixed 和 display: grid，再配 place-items: center，看似能居中，但实际存在三个硬伤：
- 在 Safari（尤其是 iOS）中，
fixed元素内部的grid容器可能无法正确继承视口尺寸，导致1fr行高塌缩为 0 - 当页面有
transform或will-change的祖先元素时，fixed会相对该祖先定位，而grid的place-items仍按“预期视口”计算，两者错位 - 遮罩层若需支持 backdrop-filter 或响应点击穿透控制，
grid容器自身容易意外创建新层叠上下文（比如加了opacity），让子弹窗被截断渲染
grid-template-rows: 1fr auto 1fr 在全屏遮罩中为何不可靠
这个技巧在普通容器里有效，但放到全屏遮罩场景下会失效，原因很实在：
-
min-height: 100vh在 iOS Safari 软键盘弹出时会骤降，上/下两个1fr行直接压缩，弹窗被顶到顶部 - 如果弹窗内容动态加载（比如带图片或远程文案），初始高度为 0，
auto行无法触发重排，1fr分布就卡死在错误比例 - 没有
inset: 0或top/right/bottom/left: 0的强制锚定，grid容器本身高度可能只等于内容高度，根本铺不满屏幕
真正能落地的 Grid 弹窗结构：只在 .modal-content 内启用 Grid
Grid 的价值不在遮罩层，而在弹窗本体的内部布局。正确分层是：.modal-overlay（fixed + flex 居中）→ .modal-content（display: grid 划分标题/主体/按钮）。
-
.modal-overlay必须用position: fixed; inset: 0; display: flex; justify-content: center; align-items: center锚定并居中——这是唯一跨浏览器稳定的起点 -
.modal-content设display: grid; grid-template-rows: max-content 1fr max-content; row-gap: 1rem，这样标题、滚动区域、按钮高度各自可控 - 主体区域（如
.modal-body）必须加overflow-y: auto; min-height: 0，否则在 Safari 中1fr不收缩，内容溢出不可滚动 - 按钮组用
grid-column: 1 / -1横跨整行，比justify-self: stretch更稳定，避免小屏下按钮换行错位
最易被忽略的一点：遮罩层的 background-color 必须用 rgba()，绝不能用 opacity。后者会让 .modal-content 里的文字、图标、SVG 全部发虚——而 Grid 布局一旦嵌套在透明容器里，backdrop-filter 和阴影渲染就彻底不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
