display: grid下是否有等效于justify-content: end的右对齐实现方案？

你需要固定列数的网格，项目数量可变时始终右对齐，直接使用justify-content: end在固定列数的Grid中无效——因为网格轨道已经占满容器宽度，无法通过对齐轨道实现项目右移。下面是两种可行的解决方案：

方案一：纯CSS反向排列网格 #

通过设置容器的direction: rtl让网格从右侧开始填充项目，再给项目单独设置direction: ltr保证内容正常显示：

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 固定5列，可按需修改数量 */
  border: 1px solid black;
  direction: rtl; /* 让网格轨道从右到左排列 */
  box-sizing: border-box;
}

.item {
  border: 1px solid red;
  direction: ltr; /* 恢复内容从左到右的排版 */
  box-sizing: border-box;
}

Click anywhere
<br> 实现效果：
<div class="grid"></div>

const grid = document.querySelector('.grid')

addEventListener('click', () => {
  const item = document.createElement('div')
  item.className = 'item'
  item.textContent = 'x'
  grid.appendChild(item)
})

这种方式无需额外计算，项目数量变化时会自动从右侧开始填充，满行后换行到上一行的右侧区域，完全满足需求。

方案二：JS辅助生成左侧占位项 #

如果不想使用direction属性，可以通过JavaScript计算每行剩余的空白槽位，在项目前添加空占位元素实现右对齐：

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid black;
}

.item {
  border: 1px solid red;
  box-sizing: border-box;
}

.placeholder {
  border: none; /* 隐藏占位项的边框 */
}

Click anywhere
<br> 实现效果：
<div class="grid"></div>

const grid = document.querySelector('.grid')
const COLUMN_COUNT = 5 // 固定列数

function updateGridAlignment() {
  // 先移除所有旧的占位项
  document.querySelectorAll('.placeholder').forEach(el => el.remove())
  
  const itemCount = grid.querySelectorAll('.item').length
  const emptySlots = COLUMN_COUNT - (itemCount % COLUMN_COUNT)
  // 刚好填满一行时不需要占位
  const needPlaceholders = emptySlots !== COLUMN_COUNT ? emptySlots : 0
  
  // 在项目最前方添加占位项
  for (let i = 0; i < needPlaceholders; i++) {
    const placeholder = document.createElement('div')
    placeholder.className = 'placeholder'
    grid.insertBefore(placeholder, grid.firstChild)
  }
}

// 点击添加项目并更新对齐
addEventListener('click', () => {
  const item = document.createElement('div')
  item.className = 'item'
  item.textContent = 'x'
  grid.appendChild(item)
  updateGridAlignment()
})

// 初始化对齐
updateGridAlignment()

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