弹窗外层必须用 position: fixed + inset: 0 锚定视口并配合 flex 居中，内层 .modal-content 才可用 display: grid 布局；grid-template-rows 应设为 max-content 1fr max-content 并配 max-height，modal-body 需 overflow-y: auto 和 min-height: 0；隐藏标题或按钮应使用 display: none；按钮组推荐 grid-column: 1 / -1 实现稳定横跨。
弹窗外层不能用 display: grid
直接给 .modal 设 display: grid 会导致居中失效、遮罩层错位、Safari 中内容塌陷。Grid 不处理浮层定位逻辑，它只划分容器内部空间。弹窗整体必须靠 position: fixed + inset: 0 锚定视口，再用 display: flex 居中 —— 这是唯一稳定跨浏览器的方式。
正确结构是：.modal（固定定位 + flex 居中） → .modal-content（真正设 display: grid 的容器）。
-
.modal只负责“在哪”，不负责“怎么分” -
.modal-content才负责“标题/内容/按钮怎么分配高度” - 漏掉这层分离，所有 Grid 写法都会在 iOS 或旧版 Chrome 里出问题
grid-template-rows: max-content 1fr max-content 必须配 max-height
写 grid-template-rows: auto 1fr auto 看似合理，但长内容会把整个弹窗撑出视口，按钮被挤走。关键不是用 auto，而是用 max-content 固定首尾高度，并给容器加 max-height 让 1fr 有计算依据。
-
.modal-content必须设max-height: 80vh（或类似值），否则1fr按无限高算，滚动失效 -
.modal-body要加overflow-y: auto和min-height: 0，否则内容少时高度塌缩 - 别用
height: 100%，它依赖父级显式高度，而父级是flex容器，不可靠
移动端隐藏标题或按钮时，用 display: none 比 visibility: hidden 安全
Grid 的轨道会自动重排剩余区域，display: none 是唯一不影响布局语义的隐藏方式。如果用 visibility: hidden 或 opacity: 0，对应轨道仍占位，导致中间内容区变窄、按钮错位。
- 在
@media (max-width: 767px)里对.modal-header设display: none即可，Grid 自动把1fr分给剩下的两块 - 避免在媒体查询里重写
grid-template-rows，重复声明容易漏掉max-content导致高度失控 - 如果按钮组需合并为一行，直接给
.modal-footer加display: flex，不要动 Grid 结构
按钮组宽度超出时，grid-column: 1 / -1 比 width: 100% 更稳
按钮组默认继承 .modal-content 的列轨道，但某些按钮文字过长或图标+文字组合时，会溢出容器。强行设 width: 100% 在 Safari 中可能触发渲染 bug，导致按钮换行错乱。
- 给
.modal-footer加grid-column: 1 / -1，让它横跨所有列轨道，不受中间内容区宽度影响 - 配合
justify-self: end或justify-self: stretch控制对齐，比用text-align更精准 - 不要给按钮本身设
white-space: nowrap，否则小屏下直接溢出，应允许合理折行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
