为何Grid布局无法使用justify-content属性实现图片右对齐？

首先明确：Grid布局完全支持justify-content属性，你遇到的问题不是这个属性不能用，而是Grid默认的轨道排列逻辑导致的。

问题原因 #

你的代码里没有指定网格的列数，Grid默认会按row方向自动生成足够的列，把所有项目放在同一行（也就是三个图片会被分配到三列里，并排显示）。此时justify-content: end只是让整个网格轨道（包含这三列）靠右对齐，所以图片会在右侧排成一行，而非纵向排列。

解决方案 #

要实现图片纵向排列且整体靠右，只需给Grid容器指定单列布局，让每个图片占一行，再用justify-content: end让这一列靠右：

body {
  margin: 0;
}

.icon {
  height: 30px;
  width: 30px;
}

#iconbanner {
  display: grid;
  background-color: gray;
  justify-content: end;
  grid-template-columns: 30px; /* 指定仅一列，宽度与图片一致 */
  gap: 8px; /* 可选：给图片添加垂直间距 */
}

如果不想固定列宽，也可以用min-content让列宽自动适应图片：

#iconbanner {
  display: grid;
  background-color: gray;
  justify-content: end;
  grid-template-columns: min-content;
  gap: 8px;
}

补充：Chrome提示用Flex的原因 #

Flex布局做这种单列右对齐的场景确实更直观，代码更简洁：

#iconbanner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background-color: gray;
  gap: 8px;
}

但Grid布局完全可以实现需求，只是需要明确指定列数来改变默认的排列逻辑。

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