能否基于现有CSS Grid代码实现第二行从右到左排列？

完全可以通过CSS Grid实现第二行从右到左排列的效果，无需改动HTML结构，只需添加少量CSS规则即可。

方法一：直接指定第二行元素的网格列位置 #

针对第二行的3个元素（第4、5、6个），通过grid-column属性强制调整它们在网格中的位置：

/* 新增规则：调整第二行元素排列方向 */
.checkers__item:nth-child(4) {
  grid-column: 3; /* 将第4个元素放到第3列 */
}
.checkers__item:nth-child(6) {
  grid-column: 1; /* 将第6个元素放到第1列 */
}

原理：原网格是3列布局，第二行默认按4→5→6的顺序填充第1-3列。通过强制指定4到第3列、6到第1列，5会自动填充中间的第2列，最终实现第二行从右到左的排列（6、5、4）。

方法二：使用order属性调整顺序（适合灵活扩展场景） #

如果后续可能调整行数或列数，也可以用order属性改变元素的显示顺序：

.checkers__item:nth-child(4) {
  order: 3;
}
.checkers__item:nth-child(5) {
  order: 2;
}
.checkers__item:nth-child(6) {
  order: 1;
}

原理：Grid布局中，order数值越小的元素排列越靠前。给第二行元素设置反向的order值，就能让它们从右到左显示。

修改后的完整CSS代码 #

.checkers {
  --item-size: 12vw;
  --item-bg-color: #222;
  --item-txt-dark-color: #222;
  --item-txt-light-color: #fff;
  
  display: grid;
  grid-template-columns: repeat(3, var(--item-size));
  grid-auto-rows: var(--item-size);
  place-content: center;
}

.checkers__item:nth-child(2n+1) {
  background-color: var(--item-bg-color);
  color: var(--item-txt-light-color);
}

/* 新增：调整第二行排列方向 */
.checkers__item:nth-child(4) {
  grid-column: 3;
}
.checkers__item:nth-child(6) {
  grid-column: 1;
}

/* design styles */
.checkers {
  min-height: 100vh;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 4vw;
}

.checkers__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

修改后，第二行元素会以6、5、4的顺序从右到左排列，同时保持第一行和第三行的正常顺序。

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