CSS实现首项占半屏，其余均分剩余空间方法

本文深入解析了如何用CSS实现“首个网格项严格占据半屏高度、其余内容均分剩余空间”的布局需求，重点对比了Flexbox与Grid两种方案的优劣：Grid通过`grid-template-rows: 50vh 1fr`配合父容器`height: 100vh`和`align-items: start`能精准、声明式地达成目标，避免拉伸与兼容性陷阱；而Flexbox虽可行但易受对齐属性和边界条件干扰。文章还直击实际开发痛点——如Safari中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+

事情说清了就结束

理论要掌握，实操不能落！以上关于《CSS实现首项占半屏，其余均分剩余空间方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！