设 grid-template-rows: 50vh 1fr，父容器需有明确高度（如 height: 100vh）；首项加 align-items: start 防拉伸，避免 height: 100%；响应式下 vh 有兼容性问题，建议 JS 动态计算或用 CSS 变量。
grid-template-rows 怎么写才能让第一个格子占 50vh
直接设 grid-template-rows: 50vh 1fr; 就行，但得确认父容器有明确高度。如果父容器没设 height 或 min-height，50vh 会失效——因为 vh 是相对于视口，但 Grid 布局中，行高计算依赖于网格容器自身的高度（尤其是显式定义的 grid-template-rows）。常见错误是只给容器加 display: grid，却忘了它默认高度是 auto。
- 父容器必须有可计算的高度，比如
height: 100vh;或min-height: 100vh; -
50vh是绝对单位，不随内容撑开；1fr是剩余空间的弹性分配，两者配合才可靠 - 别用
50%替代50vh—— 百分比是相对父容器高度，而父容器高度若由内容决定，结果不可控
首个网格项怎么确保只占第一行且不被拉伸
即使行高设对了，第一个子元素仍可能被 align-items 或 justify-items 拉伸变形，尤其当它内部有内容或设置了 height: 100%。Grid 的默认对齐行为会让子项填满单元格，这不是你想要的“占据半屏区域”，而是“撑满该单元格”。
- 给网格容器加
align-items: start;，防止首项在行内垂直拉伸 - 首项自身避免写
height: 100%;或min-height: 100%;，否则它会试图撑满整个单元格（而单元格已是 50vh） - 如果首项是图片或视频，记得加
object-fit: cover;或设宽高约束，不然可能溢出或留白
响应式下 50vh 还靠谱吗
在小屏幕（比如折叠屏、横竖切换）或 Safari 移动端，vh 单位有兼容性陷阱：地址栏显示/隐藏会导致视口高度动态变化，50vh 可能突然变大或变小，造成布局跳动。这不是 Grid 的问题，而是 vh 自身的局限。
- iOS Safari 中，
vh基于初始视口，滚动后不更新，容易导致首项高度“缩水” - 更稳妥的做法是用 JS 动态设置：监听
resize，用document.documentElement.clientHeight * 0.5算真实值，赋给自定义 CSS 变量 - 纯 CSS 方案可用
env(safe-area-inset-top)辅助微调，但无法替代高度计算逻辑
为什么不用 flex 而用 grid
Flex 做两段式垂直分割也能实现，但 Grid 在语义和控制粒度上更干净：你可以明确指定“第一行固定高度，其余自适应”，而 Flex 的 flex: 0 0 50vh + flex: 1 容易受 min-height、box-sizing 或父容器 align-items 干扰，调试成本更高。
立即学习“前端免费学习笔记（深入）”；
- Grid 的
grid-template-rows是声明式定义，意图清晰；Flex 的flex是运行时分配，边界条件多 - 如果后续要加第三块区域（比如底部固定工具栏），Grid 只需改一行：
50vh 1fr 80px，Flex 得重调顺序和 flex 值 - 注意 Safari 旧版本对
1fr在非显式高度容器中的支持不一致，测试时务必覆盖 iOS 14+
事情说清了就结束
