使用CSS Grid可高效实现复杂布局，通过display: grid定义容器，grid-template-columns和grid-template-rows划分行列，结合grid-template-areas命名区域提升可读性，如'header header header''sidebar main aside''footer footer footer'，子元素用grid-area分配位置，gap控制间距，justify-items与align-items处理对齐，配合媒体查询实现响应式，如移动端改为单列堆叠，整体结构清晰且易于维护。
使用 CSS Grid 实现复杂布局模板，关键在于合理划分网格结构、命名区域和灵活控制行列。它比传统浮动或 Flexbox 更适合二维布局，尤其适用于仪表盘、后台管理页面等需要精确排布的场景。
定义网格容器与基本结构
要启用 Grid 布局，先将父容器设置为 display: grid，然后通过 grid-template-columns 和 grid-template-rows 定义行列尺寸。
例如：container {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-rows: 80px 1fr 60px;
}
这创建了一个三列三行的网格：左侧边栏固定 200px，主内容区自适应，右侧边栏 300px；顶部导航 80px，中间主体占剩余空间，底部工具栏 60px。
使用 grid-template-areas 命名布局区域
对于复杂界面，推荐用 grid-template-areas 可视化划分区域，提高可读性。
立即学习“前端免费学习笔记（深入）”；
示例：container {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-rows: 80px 1fr 60px;
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 调整。
例如：container {
gap: 16px;
grid-gap: 16px; /* 兼容旧写法 */
}
对齐方面，可用 justify-items 水平对齐，align-items 垂直对齐。若需单独控制某个项目，使用 justify-self 或 align-self。
响应式布局处理
在不同屏幕下调整网格结构，可通过媒体查询重新定义 grid-template-areas 和行列尺寸。
比如移动端堆叠布局：@media (max-width: 768px) {
container {
grid-template-columns: 1fr;
grid-template-areas:
'header'
'sidebar'
'main'
'aside'
'footer';
}
}
这样无需改动 HTML 结构，仅靠 CSS 就实现响应式重构。
基本上就这些。Grid 的强大在于把布局从“嵌套+定位”转变为“规划+分配”，掌握好命名区域和响应式切换，复杂模板也能清晰可控。
