弹窗外层必须用 position: fixed + display: flex 居中，不能用 display: grid；grid 应用于 .modal-content 区域，以固定标题/按钮高度、中间内容可滚动，并配合 max-height、min-height 和 grid-column: 1 / -1 等确保跨设备稳定渲染。
弹窗外层不能用 display: grid 居中，必须用 position: fixed + display: flex；真正该用 Grid 的是弹窗内容区（.modal-content），否则 Safari 塌陷、遮罩错位、iOS 滚动穿透全都会出现。
为什么外层容器不能设 display: grid
Grid 只划分容器内部空间，不处理浮层定位逻辑。把 display: grid 加在 .modal（遮罩层）上，会导致：
-
grid-template-rows: 1fr auto 1fr看似能居中，但遮罩层本身没锚定视口，滚动时弹窗卡在顶部 - 遮罩背景被父级
transform或overflow: hidden截断，出现底部留白或内容裁切 - iOS Safari 渲染时直接塌陷，
1fr计算失效，弹窗高度为 0
.modal-content 怎么用 Grid 划分标题/内容/按钮区域
这才是 Grid 的正确战场：固定首尾高度、让中间内容可滚动、响应式隐藏不破坏布局。
-
grid-template-rows: max-content 1fr max-content—— 不要用auto，它在长内容下等于无限高，按钮会被挤出视口 - 必须配
max-height: 80vh和overflow: hidden，否则1fr没有计算边界 -
.modal-body要加min-height: 0+overflow-y: auto，否则 Grid 默认最小尺寸限制会让它塌缩 - 移动端隐藏标题或按钮，只用
display: none；visibility: hidden或opacity: 0仍占轨道，1fr会错误分配给“隐形区域”
.modal-footer 按钮组横跨全宽的写法
别碰 width，Safari 对 width: 100% + Grid 子项的组合渲染不稳定，容易换行错乱。
- 给
.modal-footer加grid-column: 1 / -1，让它横跨所有列轨道 - 如果按钮需要并排对齐，内部再套一层
display: flex，不要改动 Grid 结构 - 避免在媒体查询里重写
grid-template-rows，漏掉max-content就会导致高度失控
最易忽略的一点：遮罩层必须用 top: 0; left: 0; width: 100vw; height: 100vh（或 min-width: 100vw 防横向滚动条挤压），而不是 width: 100%; height: 100%——后者依赖父容器高度，而父容器很可能没撑满视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
