CSS Grid布局之所以被广泛采用，一个重要原因是它把对齐控制拆成了容器层面和子元素层面两套独立又互补的体系。理解这两套体系如何协作，是写出可维护网格样式的关键。很多排版异常并不是Grid不好用，而是把项目级属性误用在容器上，或者反过来。
容器级对齐：控制轨道整体的位置
当Grid容器有明确的宽高，且轨道尺寸总和小于容器时，容器内部就会出现多余空间。此时由justify-content和align-content决定这些空间如何分配。它们作用在网格轨道（行或列）整体之上，而非单个子元素。
例如三列固定宽度网格放在更宽的容器里，justify-content: center会让整组列水平居中；若为space-between，则列与列之间均匀留白、首尾贴边。下面代码演示了一个高度固定、内容行数不足时的垂直分配：
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 80px 80px;
height: 400px;
align-content: space-between; /* 两行轨道分散在容器上下 */
justify-content: center; /* 整组列水平居中 */
}
这种写法比给每个子项加margin自动撑开要直观得多。需要注意的是，如果轨道尺寸使用了1fr之类的弹性单位铺满容器，justify-content和align-content通常不再产生可见效果，因为已经没有多余空间可供分配。
项目级默认对齐：justify-items与align-items
容器上的justify-items和align-items用来设置所有子元素在各自网格单元格内的对齐方式。它们决定的是一个子项在其格子里的停靠方向，默认值是stretch，即拉满单元格。
把align-items设为center后，无论单元格多高，里面的内容都垂直居中；justify-items: start则让内容靠格左对齐。以下示例让所有项目在单元格内居中：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 200px;
align-items: center;
justify-items: center;
}
这种统一设定非常适合卡片列表，避免在每个卡片样式里重复写对齐规则。若某些格子内容长度差异大，统一用start能让文字顶部对齐，阅读节奏更整齐。
单元素覆盖：self系列属性
当某个子元素需要脱离容器的统一对齐规则时，可以直接在子元素上写justify-self和align-self。它们的优先级高于容器设置的items属性，且只影响自身。
比如容器统一居中，但希望其中一个按钮始终贴底，就可以单独设置。代码示例如下：
.container {
display: grid;
align-items: center;
}
.special {
align-self: end; /* 覆盖容器居中，自身靠底 */
justify-self: start;
}
这种细粒度控制在表单布局里很实用：标签统一居中，但提交按钮靠右，不必额外包一层flex。配合grid-column和grid-row指定位置，能精确定位任意单元格里的特殊元素。
常见组合与避坑
实际项目中，推荐容器用justify-items和align-items定基调，个别元素用self微调。不要试图用margin: auto在Grid里做垂直居中，原生self属性性能更好且语义清晰。
另一个误区是混淆place-items简写顺序。它等同于先写align-items再写justify-items，即place-items: center start表示垂直居中、水平靠左。下面给出一个完整页面局部布局样例：
<div class="wrap">
<div class="a">A</div>
<div class="b">B</div>
</div>
<style>
.wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
height: 300px;
place-items: center start; /* 垂直居中 水平靠左 */
}
.b {
justify-self: end; /* B靠右 */
}
</style>
通过上述分层控制，Grid对齐既灵活又不易冲突。熟练之后，大部分后台管理界面和响应式卡片墙都能纯Grid实现，减少嵌套复杂度。
CSS_Gridalign-itemsjustify-content修改时间：2026-08-02 07:00:13