Grid布局最适合经典网页骨架结构，尤其三栏式或杂志风排版；通过display: grid与grid-template-areas命名区域可直观划分header、nav、main、sidebar、footer等语义块，配合响应式@media切换模板实现移动端适配，并需注意min-height、grid-auto-rows及DevTools网格检查。
grid布局适合做经典网页的骨架结构
Grid 是目前最直接、最可控的网页整体布局方案，尤其适合经典三栏式（header / main / sidebar / footer）或杂志风排版。它不依赖浮动或定位 hack，用几行声明就能定义行列关系，初学者容易建立“区域即容器”的直觉。
用display: grid和grid-template-areas快速划分页面区域
比起手动计算grid-column起止线，用命名区域的方式更贴近设计意图，也更易维护。关键是要先在纸上或脑中把页面划成几个语义块，再映射到 CSS 中。
-
grid-template-areas值必须每行用引号包裹，区域名之间用空格分隔，换行用新引号 - 同一区域名可在多行中重复出现，表示纵向跨行；横向重复则表示跨列
- 用
.（英文句点）代表空白单元格，保持网格结构完整 - 所有命名区域必须在
grid-template-areas中显式声明，否则grid-area无效
.page {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr 300px;
min-height: 100vh;
}
<p>header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
sidebar { grid-area: sidebar; }
footer { grid-area: footer; }响应式切换靠@media重写grid-template-areas
移动端不需要侧边栏？直接改区域模板比隐藏元素更干净。注意：不同断点下的grid-template-areas可以完全不同，但每个断点内仍需保证行列数一致（否则会触发隐式网格，行为难预测）。
- 小屏下把
sidebar挪到main下方，用两行模板即可 - 避免在媒体查询里只改
grid-template-columns却不调grid-template-areas，否则区域可能错位或被裁切 - 用
grid-row/grid-column微调个别元素位置时，优先确保grid-area已生效，否则定位会失效
@media (max-width: 768px) {
.page {
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"footer";
grid-template-rows: auto auto 1fr auto auto;
grid-template-columns: 1fr;
}
}内容溢出和自动行高是初学者最容易忽略的两个坑
Grid 容器默认不会撑开子项高度，main里放长文章时，如果没设min-height或height，可能被压缩成一条线；另外，grid-auto-rows设得太小，文字就会被截断。
立即学习“前端免费学习笔记（深入）”；
- 给
main加min-height: calc(100vh - 200px)（减去 header + footer 高度）比单纯100%更可靠 - 避免对
grid-template-rows写死像素值（如100px），除非确定内容高度恒定；优先用auto、minmax()或1fr - 测试时故意往
main塞 50 行 lorem ipsum，看是否滚动、是否撑开 footer —— 这个动作能暴露 80% 的布局断裂问题
实际项目里，真正卡住人的往往不是语法，而是没想清楚“哪些区域该固定尺寸、哪些该弹性伸缩、哪些要随内容自适应”。先画草图，再写grid-template-areas，最后用 DevTools 的 Grid overlay 功能一帧帧检查区域对齐——这三步走完，大部分布局问题就消了一半。
