如何为.grid-container添加属性实现网格右对齐布局？

我想要实现右对齐的网格布局，但当前仅能实现左对齐的布局。以下是我编写的代码：

CSS代码 #

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  grid-gap: 16px;
}

.grid-item {
  width: 100%;
  height: 30px;
  border: 1px solid black;
}

HTML代码 #

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

请问需要为.grid-container类添加哪些额外属性才能实现目标布局？

给.grid-container添加justify-content: end属性即可实现网格整体右对齐：

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  grid-gap: 16px;
  /* 新增属性 */
  justify-content: end;
}

说明： #

justify-content: end 会让网格内的所有列向容器右侧对齐，不管每行元素数量多少，都会靠右排列，完全匹配你要的目标效果。

如果你的需求是仅让最后一行元素右对齐，前面的行保持铺满容器宽度，可以调整列的定义方式，配合auto-fit使用：

.grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  justify-content: end;
}

这种写法会让网格自动适配容器宽度生成最多3列，最后一行元素不足时会自动靠右对齐，前面的行则铺满整个容器宽度。

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