Grid布局下如何针对特定行列设置元素对齐方式？

完全可以实现，不用逐个元素加属性，用CSS选择器就能批量配置：

1. 第一列所有元素统一右对齐 #

通过:nth-child()选择器匹配第一列的所有子元素，批量设置justify-self: end（水平右对齐）：

<div class="grid-container">
  <div class="grid-item">第一列元素1</div>
  <div class="grid-item">第二列元素1</div>
  <div class="grid-item">第三列元素1</div>
  <div class="grid-item">第一列元素2</div>
  <div class="grid-item">第二列元素2</div>
  <div class="grid-item">第三列元素2</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

/* 匹配3列布局下的第一列元素（第1、4、7...个） */
.grid-item:nth-child(3n + 1) {
  justify-self: end;
}

如果你的列数不是3，把公式里的3换成实际列数即可，比如2列就用2n + 1。

2. 特定行统一设置对齐方式 #

同样用:nth-child()选择器匹配目标行的所有元素，批量设置对齐属性：

比如要让第二行所有元素垂直居中对齐：

/* 3列布局下，第二行是第4-6个元素 */
.grid-item:nth-child(n + 4):nth-child(-n + 6) {
  align-self: center;
}

计算方法：目标行起始位置 = (行号-1)列数 + 1，结束位置 = 行号列数。比如3列第2行，起始是4，结束是6。

进阶：用Grid线选择器（更精准） #

如果你的Grid有命名线，或者需要更灵活的匹配，也可以用属性选择器定位：

/* 选中所有位于第一列的元素 */
.grid-item[grid-column-start="1"] {
  justify-self: end;
}

/* 选中所有位于第二行的元素 */
.grid-item[grid-row-start="2"] {
  align-self: center;
}

这种方式不需要依赖元素的排列顺序，更适合动态生成的Grid布局。

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