如何用CSS Grid实现复杂弹窗内部的分区排版？

弹窗外层必须用 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 容器，负责标题、内容、按钮三块区域的分配。关键配置如下：

1. grid-template-rows: max-content 1fr max-content —— 首尾用 max-content 固定高度，中间用 1fr 吸收剩余空间
2. 必须配 max-height: 80vh 和 overflow: hidden，否则 1fr 没有计算边界，长内容会撑爆视口
3. .modal-body 要加 overflow-y: auto 和 min-height: 0，否则 Grid 子项最小尺寸限制会让它塌缩
4. 别写 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 结构看起来“没反应”。不是代码写错了，而是计算前提不存在。