Grid全屏布局需满足容器高度撑满视口且显式定义网格线，否则grid-column/row失效；html、body需设height:100%或min-height:100vh并清除margin；必须声明grid-template-columns/rows以生成网格线；推荐用gap而非margin控制间距；语义化分区优先使用grid-template-areas。
Grid 全屏布局不是加个 display: grid 就完事，关键在「容器高度必须撑满视口」+「网格线必须显式存在」，否则 grid-column、grid-row 会失效，子元素还卡在默认文档流里。
body 和 html 必须设 height: 100% 或 min-height: 100vh
浏览器默认不会让 body 占满整个视口高度，只按内容撑高。Grid 容器若嵌套在 body 里，又没设高度，那它实际高度就是 0 —— 后面所有网格定位都白搭。
-
html, body { height: 100%; margin: 0; }是最稳妥写法，尤其当 Grid 容器是body直接子元素时 - 如果 Grid 容器是某个
.wrapper，那就得给它加min-height: 100vh，而不是height: 100vh（避免内容超长时被截断） - 别漏掉
margin: 0——body默认有 8px 外边距，会导致滚动条和视觉错位
grid-template-columns/rows 至少要定义一维
很多人写了 display: grid + grid-column: 1 / -1，但页面毫无反应。根本原因是：没声明 grid-template-columns 或 grid-template-rows，浏览器压根没生成任何网格线，1 和 -1 指向的线根本不存在。
- 哪怕只想让子元素横跨整行，也得写至少一个列定义，比如
grid-template-columns: 1fr - 全屏三栏布局常用：
grid-template-columns: 200px 1fr 300px或响应式写法grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 用
grid-auto-columns或grid-auto-rows不顶用——它们只对“超出模板范围”的隐式网格生效，不能凭空造出第一组轨道
gap 比 margin 更安全，但别混用
用 margin 给网格项加间距，会在最后一行/列多出空白，还可能触发 margin collapse；而 gap 是网格专属属性，只作用于轨道之间，不干扰项目自身盒模型。
- 统一用
gap: 1rem控制行列间距，别再写margin-right和margin-bottom -
gap在现代浏览器中已无兼容性问题（Chrome 66+/Firefox 63+/Safari 14.1+） - 如果父容器有 padding，
gap不会吃掉 padding，但margin可能跟 padding 外溢或重叠
全屏分区建议用 grid-template-areas 配合命名区域
像 header / sidebar / main / footer 这类语义明确的分区，用 grid-template-areas 比一堆 grid-row/grid-column 更直观、更易维护，只要 HTML 结构不变，CSS 就不用动。
- 示例写法：
grid-template-areas: "header header" "sidebar main" "footer footer"，然后每个区块用grid-area: header等对应 - 注意：
grid-template-areas中每行引号内空格数必须等于列数，否则解析失败 - 别为了“看起来整洁”强行命名所有小卡片——只有逻辑强、区域多、顺序固定时才值得用，否则直接
grid-column: 1 / 2更轻量
最容易被忽略的是：Grid 全屏 ≠ 视觉上填满屏幕，而是「容器高度撑满 + 网格轨道真实存在」。很多问题其实出在 body 高度没设、或列定义写成了 auto 而非具体值，导致浏览器根本不画网格线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
