CSS Grid：如何将列向右对齐？为何justify-content:end不生效？

问题场景与代码 #

正在学习CSS Grid时遇到网格内容对齐问题，代码如下：

CSS代码 #

.grid-container {
  background-color: grey;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  justify-content: end;
}

.grid-item {
  background-color: green;
  grid-column: span 7 / span 7;
}

HTML代码 #

<div class="grid-container">
  <div class="grid-item">My item</div>
</div>

对规则的理解与疑问 #

• grid-template-columns: repeat(12, minmax(0, 1fr))：创建12个基于可用空间的等宽列。
• justify-content: end：理应让网格项紧贴容器右侧？
• grid-column: span 7 / span 7：占据12列中的7列空间。

疑问：为何网格项没有紧贴容器右侧？

问题原因 #

justify-content 在CSS Grid中负责整个网格轨道在容器内的对齐，但你用 repeat(12, minmax(0, 1fr)) 定义的12列已经完全占满容器宽度——1fr 是按比例分配容器剩余空间的单位，12个1fr加起来刚好填满容器，此时网格轨道没有多余空间，justify-content: end 无法发挥作用。

而你的网格项默认从第1列开始向右跨7列，所以会靠左显示，不会贴向容器右侧。

解决方案 #

要让网格项紧贴右侧，只需调整它的起始列位置，让它从第6列开始（12-7+1=6），这样跨7列后刚好到第12列（容器最右侧）。

修改网格项的grid-column属性，两种写法都可以：

.grid-item {
  background-color: green;
  /* 写法1：指定起始列，跨7列 */
  grid-column: 6 / span 7;
}

或者更灵活的写法，直接让网格项跨到最后一列：

.grid-item {
  background-color: green;
  /* 写法2：跨7列，结束位置为最后一列 */
  grid-column: span 7 / -1;
}

补充说明：如果网格轨道未占满容器宽度（比如使用固定宽度列），justify-content: end 才会让整个网格轨道整体右对齐，但你的场景是轨道已填满容器，所以需要调整的是网格项在轨道中的位置，而非轨道在容器中的位置。

内容的提问来源于stack exchange，提问作者Sven