使用 grid-template-areas 可直观定义网格布局，通过命名区域提升代码可读性，结合 align-items、justify-items 等对齐属性可精确控制子元素位置，实现灵活且语义清晰的页面结构。
在使用 CSS Grid 布局时，模板区域（grid-template-areas） 和 子元素对齐方式 是两个非常实用的功能。它们能帮助开发者快速构建清晰的页面结构，并精确控制内容的对齐行为。
使用 grid-template-areas 定义布局区域
通过 grid-template-areas，你可以用命名的方式直观地规划网格结构，提升代码可读性。
基本用法如下：
.container {display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 1fr 50px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
每个字符串代表一行，每个单词代表一个单元格区域。重复名称可让元素跨列或跨行，点号（.）表示空单元格。
立即学习“前端免费学习笔记（深入）”；
控制子元素在网格单元内的对齐方式
即使使用了模板区域，你仍需要控制子元素在其分配区域中的对齐位置。CSS Grid 提供了两组属性：一种作用于整个网格容器，另一种作用于单个子项。
常用的对齐属性包括：
- justify-items：控制所有子元素在单元格内沿行轴（横向）的对齐方式，可设为 start、end、center、stretch
- align-items：控制所有子元素在单元格内沿列轴（纵向）的对齐方式
- justify-self：针对单个子元素设置横向对齐
- align-self：针对单个子元素设置纵向对齐
- place-items：简写属性，同时设置 align-items 和 justify-items
示例：
.container {
align-items: center;
justify-items: start;
}
这会让所有子元素垂直居中、水平靠左。若只想让某个元素特殊处理：
.main {align-self: start;
justify-self: center;
}
此时 main 区域的内容将顶部对齐、水平居中。
结合模板区域与对齐实现灵活布局
实际开发中，可以先用 grid-template-areas 搭建整体框架，再通过 align-self 或 justify-self 微调特定模块的内部对齐。
例如，页脚需要文字右对齐：
.footer {grid-area: footer;
justify-self: end;
}
或者侧边栏图标垂直居中但靠上：
.sidebar {grid-area: sidebar;
align-self: start;
justify-self: center;
}
基本上就这些。模板区域让布局更直观，对齐属性让你精细控制内容位置。两者结合，既能快速搭建结构，又能满足视觉排版需求。不复杂但容易忽略细节，比如默认对齐是 stretch，如果不设置可能意外撑满空间。
