如何用CSS nth-child(odd/even)实现CSS Grid列对齐？

你想要实现网格内奇数子元素贴左垂直边缘、偶数子元素贴右的效果，当前代码的核心问题是选择器定位错误——你给容器.questionsAndAnswers本身添加了:nth-child(odd)选择器，但这个容器是单个父元素的子元素，不会触发该选择器，且你真正需要控制的是容器内部的<p>子元素，而非容器本身。

修正后的代码如下：

CSS代码 #

.questionsAndAnswers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  font-size: 12px;
  font-family: sans-serif;
  border: 1px solid red;
}

/* 奇数位置的子元素贴左对齐 */
.questionsAndAnswers p:nth-child(odd) {
  justify-self: start;
}

/* 偶数位置的子元素贴右对齐 */
.questionsAndAnswers p:nth-child(even) {
  justify-self: end;
}

HTML代码 #

<div class="questionsAndAnswers">
  <p>one</p>
  <p>two</p>
  <p>three</p>
  <p>four</p>
</div>

关键说明 #

• 用justify-self替代justify-items：justify-items是给容器内所有子元素设置默认对齐规则，而justify-self可以单独控制每个网格项的对齐方式，更适配这种交替对齐的需求。
• 精准定位子元素：通过.questionsAndAnswers p:nth-child(odd/even)，直接选中容器内对应位置的<p>元素，实现针对性的对齐控制。

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