如何在CSS Grid中右对齐指定列而非全部列

这需求很容易搞定，不用给每个<span>加特殊类或者单独写样式，我们可以利用CSS的:nth-child()选择器结合Grid的justify-self属性来实现，完美匹配你的要求。

核心思路 #

你的Grid是4列布局，每一行的第1、3列需要右对齐，第2、4列左对齐。我们可以通过:nth-child()的公式精准选中对应位置的所有元素，然后统一设置对齐方式，完全不需要修改HTML结构。

完整代码示例 #

<style>
.myclass {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  gap: 8px; /* 可选，增加列间距让对齐效果更直观 */
}

/* 选中所有第一、三列的元素：4n+1对应每行第1个，4n+3对应每行第3个 */
.myclass > span:nth-child(4n + 1),
.myclass > span:nth-child(4n + 3) {
  justify-self: end; /* 右对齐 */
}

/* 第二、四列默认就是左对齐，无需额外设置；如果想显式声明也可以加下面这段：
.myclass > span:nth-child(4n + 2),
.myclass > span:nth-child(4n + 4) {
  justify-self: start;
}
*/
</style>

<div class="myclass">
  <span>AAAA</span>
  <span>BBBB</span>
  <span>CCCC</span>
  <span>DDDD</span>
  <span>EEEE</span>
  <span>FFFF</span>
  <span>GGGG</span>
  <span>HHHH</span>
</div>

效果说明 #

• 所有处于第一列的元素（第1、5个<span>）和第三列的元素（第3、7个<span>）会自动右对齐
• 第二列（第2、6个）和第四列（第4、8个）保持默认的左对齐
• 整个实现完全不需要修改HTML结构，也不用给任何元素加额外类名，完全符合你的需求

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