如何将CSS Grid元素对齐至右侧列？

可行，有几种不同的解决方案，根据你的需求选择：

方法一：让整个网格在容器内右对齐（视觉效果最简便） #

如果你的容器宽度大于网格总宽度（10列的总宽度+间距），可以通过justify-content: end让整个网格向右对齐，容器左侧留出的空间视觉上就像空列，元素自然处于最右侧的位置：

.hello {
  border-style: solid;
  border-color: blue;
}

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(10, 5rem);
  justify-content: end; /* 关键属性 */
}

这种方法不需要修改HTML结构，适合只需要视觉上右对齐的场景。

方法二：反转元素顺序+网格列反向排列（真正填充网格右侧列） #

如果你需要让网格的前6列确实为空，元素填充后4列，可以反转HTML中元素的顺序，再通过grid-auto-flow: column reverse让元素从右往左填充，最终显示顺序保持1、2、3、4：

修改后的HTML：

<div class="container">
  <div class="hello">4</div>
  <div class="hello">3</div>
  <div class="hello">2</div>
  <div class="hello">1</div>
</div>

修改后的CSS：

.hello {
  border-style: solid;
  border-color: blue;
}

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(10, 5rem);
  grid-auto-flow: column reverse; /* 关键属性 */
}

方法三：动态计算列起始位置（无需修改HTML） #

如果不想调整HTML结构，又需要元素真正填充网格的右侧列，可以结合CSS变量和JavaScript动态计算第一个元素的起始列：

CSS：

.hello {
  border-style: solid;
  border-color: blue;
}

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(10, 5rem);
}

/* 第一个元素从计算出的列开始 */
.container .hello:first-child {
  grid-column-start: calc(10 - var(--item-count) + 1);
}

JavaScript：

const container = document.querySelector('.container');
// 计算容器内的元素数量
const itemCount = container.children.length;
// 设置CSS变量
container.style.setProperty('--item-count', itemCount);

这样无论元素数量是多少，都会自动填充网格的最右侧列，前面的列保持为空。

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