嵌套网格是独立布局容器，需在子网格上设置justify-items和align-items控制对齐，父级对齐属性不继承。示例中.nested-grid通过justify-items:center和align-items:center实现子元素居中，特殊项可用justify-self:end单独右对齐；响应式设计可结合媒体查询调整列数，避免常见误区如依赖父级对齐或遗漏display:grid声明。
在使用 CSS Grid 布局时，嵌套网格（nested grid）是一种常见且强大的布局方式。它允许你在父网格的某个单元格中创建一个独立的子网格，从而实现更复杂、更灵活的页面结构。然而，嵌套网格中的子元素对齐问题常常让人困惑。本文通过实际示例，讲解如何正确使用嵌套网格并控制子元素的对齐方式。
什么是嵌套网格？
嵌套网格指的是在一个已经属于 Grid 容器的元素内部，再将其子元素设置为一个新的 Grid 容器。这个“内部”的网格就是嵌套网格。
关键点在于：嵌套网格是独立于父网格的布局上下文，它的 grid-template、justify-items、align-items 等属性不会自动继承父级设置。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.nested-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
justify-items: center; / 控制子项在列轴上的对齐 /
align-items: end; / 控制子项在行轴上的对齐 /
}
在这个例子中，.container 是父网格，而 .nested-grid 是其子元素，同时自身也是一个网格容器。
子元素对齐控制方法
嵌套网格中的子元素对齐，需要在嵌套网格本身上设置对齐属性，而不是依赖父级。以下是常用的控制方式：
- justify-items：定义网格项在单元格内的水平对齐方式（start, center, end, stretch）
- align-items：定义网格项在单元格内的垂直对齐方式
- justify-self：单独控制某个网格项的水平对齐
- align-self：单独控制某个网格项的垂直对齐
示例：让嵌套子项居中显示
.nested-grid {
display: grid;
grid-template-columns: 100px 100px 100px;
justify-items: center;
align-items: center;
height: 150px;
background: #f0f0f0;
}
.nested-grid > div {
background: coral;
padding: 10px;
}
此时每个子 div 都会在自己的网格单元格中居中显示。
避免常见陷阱
在实践中，容易出现以下误解：
- 认为父网格的
justify-items会影响嵌套子元素 —— 实际不会，嵌套网格有自己的对齐上下文 - 忘记设置嵌套容器的
display: grid，导致子元素无法参与网格布局 - 在嵌套网格中使用
margin: auto对齐时，可能与justify-items冲突
如果希望某个嵌套子项单独右对齐：
.special-item {
justify-self: end;
}
响应式嵌套网格建议
嵌套网格在响应式设计中非常有用。例如，在父网格的一个区域中，根据屏幕尺寸调整嵌套网格的列数：
.nested-grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.nested-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.nested-grid {
grid-template-columns: repeat(3, 1fr);
}
}
这样可以在不同设备上保持良好的内容组织。
基本上就这些。嵌套网格不是魔法，只要理解它是一个独立的布局容器，就能更好地控制其中子元素的对齐行为。关键是：对齐属性要写在嵌套网格自身上，而不是指望父级传递。
