使用CSS Grid布局可轻松构建复杂网页结构，关键在于掌握行列定义与区域划分。通过display: grid将父元素设为容器，再用grid-template-columns和grid-template-rows定义列宽与行高，即可实现精准对齐的响应式布局。
使用CSS Grid布局可以轻松实现复杂的网页结构，关键在于掌握行列定义和区域划分。Grid通过容器和项目两个层级来组织内容，只需几行代码就能构建响应式、对齐精准的布局。
定义Grid容器与行列
要启用Grid布局，先将父元素设为容器，再设置行和列的尺寸。
步骤如下：
- 在容器上使用 display: grid 启用网格
- 用 grid-template-columns 定义列宽
- 用 前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}这会创建三列两行的网格，中间列占两份宽度，第一行高100px，第二行200px。
使用grid-template-areas划分区域
通过命名区域可直观地规划页面结构，适合头部、侧边栏、主体等布局。
方法是：
- 用 grid-area 给子元素命名
- 在容器中用 grid-template-areas 按行列排布名称
示例：
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }这种方式让布局结构一目了然，修改位置只需调整字符串排列。
控制间距与隐式网格
实际布局中常需留白或动态添加项目。
建议做法：
- 用 gap 设置行与列之间的间距（替代老式margin）
- 当项目超出定义的网格时，浏览器自动创建隐式轨道，可用 grid-auto-rows 或 grid-auto-columns 控制其大小
例如：
立即学习“前端免费学习笔记（深入）”；
.container {
gap: 10px;
grid-auto-rows: 80px;
}基本上就这些。Grid的强大在于灵活组合这些属性，既能精确控制每个单元格，也能快速搭建整体框架。不复杂但容易忽略的是命名一致性和fr单位的合理分配。熟练后，多数布局都能用更少代码实现。
