grid-template-columns 应设为“200px 1fr”实现导航栏定宽、内容区自适应，配合 grid-template-areas 和 grid-area 精准定位 nav 与 main，容器需加 min-height: 100vh 防塌陷，移动端改用 grid-template-areas: "nav" "main" 与 grid-template-columns: 1fr 实现响应式。
grid-template-columns 怎么写两列固定比例
导航栏和内容区并排，本质是定义两列宽度关系。grid-template-columns 是唯一需要动的地方，其他都是配套。别碰 display: flex 或 float，那是绕路。
常见错误：写成 grid-template-columns: 200px 1fr 后发现导航栏在右、内容在左——其实是没设 grid-template-areas 或没控制子元素顺序，Grid 不会自动按 HTML 顺序填格子。
-
200px 1fr：左侧导航定宽 200px，右侧内容占满剩余空间（推荐初用） -
25% 75%：按百分比切分，但响应式差，小屏下导航可能太窄 -
minmax(200px, 25%) 1fr：导航最小 200px、最大占 25%，兼顾弹性与底线（进阶用）
nav 和 main 元素怎么放进对应网格区域
Grid 不会读心，nav 和 main 默认还是块级流式排列。必须显式指定它们的位置，否则全挤在第一行第一列。
最稳的方式是用 grid-area 配合 grid-template-areas，语义清晰、不易错：
立即学习“前端免费学习笔记（深入）”；
body {
display: grid;
grid-template-areas: "nav main";
grid-template-columns: 200px 1fr;
}
nav { grid-area: nav; }
main { grid-area: main; }
容易踩的坑：grid-column: 1 / 2 这类坐标写法容易数错起止线，尤其加了 gap 或隐式轨道后；grid-area 字符串命名直接对应布局意图，调试时一眼看懂。
为什么导航栏高度塌陷或内容区不占满视口
Grid 容器本身没高度，子项又没设高度，结果就是整个布局“看不见”——不是代码错，是缺了高度锚点。
关键动作只有两个：
- 给 Grid 容器（比如
body或外层div）加上min-height: 100vh，确保撑满视口 - 避免给
nav或main设height: 100%，它依赖父容器有明确高度才能生效；min-height: 100%在 Grid 里反而可能失效 - 如果用了
html { height: 100% }，记得body也要跟上，否则100vh没问题，但100%会断链
移动端要不要改 grid-template-columns
要，但别用 @media 反复重写整套 grid 定义。更轻量的做法是只换列定义，保留区域命名：
@media (max-width: 768px) {
body {
grid-template-areas: "nav" "main";
grid-template-columns: 1fr;
}
}
这样 nav 和 main 的 grid-area 仍有效，不用改 HTML 结构或 JS 选择器。注意别漏掉 grid-template-rows —— 单列时浏览器会自动按内容生成行高，一般不用干预。
真正容易被忽略的是：gap 在单列模式下如果还留着，会导致导航和内容之间多出空白；建议在媒体查询里一并设 gap: 0 或用 row-gap 单独控制。
