如何用CSS Grid实现单元格的动态右对齐？

当然可以用CSS Grid实现，分两种场景给出方案：

固定列数场景（比如你例子中的2列） #

针对固定列数，我们可以用CSS伪类选择器定位最后一行的元素，自动调整它们的网格位置：

示例代码（2列网格） #

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 固定2列 */
  gap: 1rem; /* 可选：设置网格间距 */
}

/* 当元素总数为奇数时，最后一个元素自动放在第二列 */
.grid-item:last-child:nth-child(odd) {
  grid-column: 2;
}

这样不管你有3、5、7...个元素，最后一行的单个元素都会自动靠右，左边留空，完全不需要手动设置grid-column。

如果是3列网格，只需要调整选择器：

.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

/* 最后一行只剩1个元素时，放在第3列 */
.grid-item:last-child:nth-child(3n + 1) {
  grid-column: 3;
}

/* 最后一行剩2个元素时，分别放在第2、3列 */
.grid-item:nth-last-child(2):nth-child(3n + 1) ~ .grid-item {
  grid-column: 2;
}
.grid-item:last-child:nth-child(3n + 1) ~ .grid-item {
  grid-column: 3;
}

动态列数场景（列数和元素数量都不固定） #

这种纯CSS很难完全适配，需要结合JavaScript计算剩余元素数量，然后给最后一行的元素设置对应的grid-column值：

示例代码 #

const gridContainer = document.querySelector('.grid-container');
const colCount = parseInt(getComputedStyle(gridContainer).getPropertyValue('--col-count'));
const items = gridContainer.querySelectorAll('.grid-item');
const totalItems = items.length;
const remainder = totalItems % colCount;

if (remainder !== 0) {
  // 选中最后一行的元素
  const lastRowItems = Array.from(items).slice(-remainder);
  lastRowItems.forEach((item, index) => {
    // 从右侧列开始分配位置
    item.style.gridColumn = colCount - remainder + index + 1;
  });
}

对应的CSS：

.grid-container {
  display: grid;
  --col-count: 2; /* 通过变量定义列数，可动态修改 */
  grid-template-columns: repeat(var(--col-count), 1fr);
  gap: 1rem;
}

为什么之前的方法无效？ #

• justify-content: end：它是对齐整个网格容器内的所有轨道，而不是单个元素。当你固定列数时，轨道已经填满容器宽度，所以这个属性不会影响最后一行元素的位置。
• direction: rtl：会反转整个网格的列顺序，导致原本的第一列跑到右侧，不符合你的布局需求。

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