CSS Grid布局中如何动态隐藏每行最后一项的右侧分割线

问题原因 #

你当前的代码仅为所有网格项统一添加了右侧分割线，没有加入隐藏每行末尾元素分割线的逻辑，因此所有元素的右侧线都会正常渲染，才会出现行尾元素分割线不符合预期显示的问题。
另外由于你使用了auto-fill实现自适应列数，也不能写死nth-child(3n)这类固定列数的选择器做排除，否则容器宽度变化、列数自动调整时逻辑就会失效。

修复方案 #

这里提供一个适配动态列数的通用方案，无需写死列数判断逻辑：
将分割线放到两个网格项的间距中间，再给网格容器添加溢出隐藏，超出容器右边缘的分割线会被自动裁剪，自然实现每行最后一个元素分割线隐藏的效果。

修改后的核心代码如下：

1. 给.grid容器新增溢出隐藏属性：

.grid {
  width: 25em;
  padding: .5em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
  grid-gap: .5em;
  border: 1px dashed palevioletred;
  overflow: hidden; /* 新增属性 */
}

2. 调整分割线的定位位置：

.grid > .item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -0.25em; /* 调整为负的间距一半，刚好放在两个元素中间 */
  width: 1px;
  background-color: cornflowerblue;
}

该方案兼容性好，无论网格自适应成几列都可以正常生效，不需要后续调整逻辑。

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