CSS Grid布局中子项跨列数不固定时如何选中每行最右侧元素

当前纯CSS没有内置伪类支持选中网格每行的末尾元素，跨列规则不固定的场景下没法靠nth-child预设位置匹配，可按需求选以下两种方案：

方案1：无JS，适配满行场景 #

直接改边框的实现逻辑，不用给每个<li>加右侧伪元素，靠网格容器的背景渐变画竖分隔线，竖线只会出现在列间隙中间，行最右端外侧不会有多余边框。

• 先删掉原代码里li::after的全部样式
• 给ul加背景样式，自动匹配8列布局的列间隙位置：

ul {
  /* 保留原有grid布局配置 */
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(12.5% - 6.75px),
    #7c7c7c calc(12.5% - 6.75px),
    #7c7c7c calc(12.5% - 5.75px),
    transparent calc(12.5% - 5.75px)
  );
  background-size: calc(12.5% + 2.25px) 100%;
  background-repeat: repeat-x;
  background-clip: content-box;
}

注意：这个方案只适合所有行刚好填满8列的场景，如果有不满8列的行，后方空白区域会残留多余竖线。

方案2：少量JS动态匹配（推荐，适配所有场景） #

直接通过每个<li>的垂直位置判断行末尾，给对应元素加类名隐藏右边框，实现简单兼容性好。

• 先定义隐藏边框的类样式：

li.no-right-border::after {
  display: none;
}

• 页面加载完成后加如下逻辑，窗口缩放时会自动重新计算行位置：

const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li');

function updateLastItemClass() {
  // 先清空所有已添加的类
  lis.forEach(item => item.classList.remove('no-right-border'));
  let currentRowTop = null;
  let lastItemOfRow = null;

  lis.forEach(item => {
    const itemTop = item.offsetTop;
    // 遇到新行，给上一行的最后一个元素加类
    if (currentRowTop !== null && itemTop !== currentRowTop) {
      lastItemOfRow.classList.add('no-right-border');
    }
    currentRowTop = itemTop;
    lastItemOfRow = item;
  });
  // 单独处理最后一行
  lastItemOfRow && lastItemOfRow.classList.add('no-right-border');
}

// 初始执行一次
updateLastItemClass();
// 窗口缩放时重新计算
window.addEventListener('resize', updateLastItemClass);

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