如何移除Grid布局中每行最后一列的border-right样式？

问题背景 #

当前的4列网格布局里，所有子div都默认带有右侧红色边框，需要移除第4个和第8个div的这个边框样式。

解决方案 #

通过CSS的:nth-child选择器可以轻松实现，提供两种方案供选择：

方案1：精准指定目标元素 #

直接定位第4和第8个子元素，清除它们的右侧边框：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
}

.container div{
  padding: 1rem;
  border-right: 1px solid red;
  height: 50px;
}

/* 移除第4、8个div的右侧边框 */
.container div:nth-child(4),
.container div:nth-child(8) {
  border-right: none;
}

方案2：适配多行的通用写法 #

由于布局是4列，每行最后一个元素的位置是4、8、12...，用4n可以匹配所有这类元素，适合后续增加行数的场景：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
}

.container div{
  padding: 1rem;
  border-right: 1px solid red;
  height: 50px;
}

/* 匹配每行最后一个元素，清除右侧边框 */
.container div:nth-child(4n) {
  border-right: none;
}

对应HTML结构（无需修改） #

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

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