响应式Grid布局加载更多后，如何精准移除最后一行元素的下边框？

你之前的方案问题在于，nth-last-child(-n + N)是固定选中最后N个元素，而非最后一行的元素。当总元素数不是列数的整数倍时（比如15个元素在2列布局下，最后一行只有1个），就会误选中上一行的元素。

下面是两种解决方案，分别适配纯CSS和JS配合的场景：

纯CSS精准适配方案 #

这个方案通过判断元素的位置（是否为列数的倍数），精准定位最后一行的元素，无需JS介入：

/* 基础样式：所有网格项添加下边框 */
.grid-item {
  border-bottom: 1px solid #ccc;
  /* 补充你的其他样式，如内边距、宽度等 */
}

/* 1列布局（默认）：仅最后1个元素移除边框 */
.grid-item:nth-last-child(1) {
  border-bottom: none;
}

/* 2列布局（540px以上） */
@media (min-width: 540px) {
  /* 总元素数为偶数时，最后2个元素都在最后一行 */
  .grid-item:nth-last-child(2):nth-child(2n) ~ .grid-item,
  /* 总元素数为奇数时，仅最后1个元素在最后一行 */
  .grid-item:nth-last-child(1):nth-child(2n + 1) {
    border-bottom: none;
  }
}

/* 3列布局（920px以上） */
@media (min-width: 920px) {
  /* 总元素数是3的倍数时，最后3个元素在最后一行 */
  .grid-item:nth-last-child(3):nth-child(3n) ~ .grid-item,
  /* 总元素数模3余1时，仅最后1个元素在最后一行 */
  .grid-item:nth-last-child(1):nth-child(3n + 1),
  /* 总元素数模3余2时，最后2个元素在最后一行 */
  .grid-item:nth-last-child(2):nth-child(3n + 2) ~ .grid-item {
    border-bottom: none;
  }
}

选择器逻辑说明 #

• :nth-child(2n) 匹配偶数位置的元素，当它是倒数第2个时，说明总元素数是偶数，此时它和倒数第1个元素同属最后一行。
• :nth-child(2n + 1) 匹配奇数位置的元素，当它是倒数第1个时，说明总元素数是奇数，只有它在最后一行。
  3列布局的逻辑同理，覆盖了总元素数为3的倍数、余1、余2三种场景。

JS配合的灵活方案（适配动态列数/元素数） #

如果你的Grid用auto-fit实现响应式列数，或者元素数量频繁变化，可以用CSS变量结合JS动态计算最后一行元素：

.grid-container {
  display: grid;
  /* 定义响应式列数变量 */
  grid-template-columns: repeat(var(--columns, 1), 1fr);
}

@media (min-width: 540px) {
  .grid-container {
    --columns: 2;
  }
}

@media (min-width: 920px) {
  .grid-container {
    --columns: 3;
  }
}

.grid-item {
  border-bottom: 1px solid #ccc;
}

/* 动态计算最后一行的元素数量 */
.grid-item:nth-last-child(-n + calc(
  var(--total-items) % var(--columns) == 0 
    ? var(--columns) 
    : var(--total-items) % var(--columns)
)) {
  border-bottom: none;
}

然后用JS设置总元素数变量：

// 初始加载6个元素时设置变量
document.querySelector('.grid-container').style.setProperty('--total-items', 6);

// 点击「查看更多」后更新变量（假设加载后总元素数为15）
document.querySelector('.view-more-btn').addEventListener('click', () => {
  // 这里添加加载更多元素的DOM操作逻辑
  document.querySelector('.grid-container').style.setProperty('--total-items', 15);
});

这个方案无需针对每个断点写复杂选择器，适配性更强。

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