如何在Grid布局的动态数据仪表盘中，自动移除最后一行元素的border-bottom样式？

嘿，这个问题我之前做类似的仪表盘时也踩过坑！Grid布局处理动态数据的最后一行样式确实有点绕，不过有两个实用的方案，纯CSS或者JS辅助，都能完美解决你的需求~

方案一：纯CSS实现（推荐，无需JS） #

假设你的Grid容器类是.dashboard-grid，每个仪表盘项的类是.dashboard-item，先给所有项默认加上border-bottom：

.dashboard-item {
  border-bottom: 1px solid #ddd;
  /* 你的其他样式，比如padding、Grid项的尺寸设置 */
}

然后用:has()伪类（目前Chrome、Firefox、Safari等主流浏览器都已支持）判断数据总数的奇偶性，针对性移除最后一行的border-bottom：

/* 数据总数为奇数时，选中最后一个独占一行的元素 */
.dashboard-grid:has(.dashboard-item:last-child:nth-child(odd)) .dashboard-item:last-child {
  border-bottom: none;
}

/* 数据总数为偶数时，选中最后一行的两个元素 */
.dashboard-grid:has(.dashboard-item:last-child:nth-child(even)) .dashboard-item:nth-last-child(-n+2) {
  border-bottom: none;
}

原理很直白：:has()会检查容器内最后一个元素的位置是奇数还是偶数——如果是奇数，说明总数是奇数（最后一个元素的位置等于总数），只需要去掉它的border；如果是偶数，说明总数是偶数，直接去掉最后两个元素的border就行。

方案二：JS辅助实现（兼容性更强） #

如果需要兼容不支持:has()的旧浏览器（比如IE或非常老的Chrome版本），可以用JS动态计算数据数量，给最后一行的元素加个移除border的类：
先在CSS里定义这个类：

.no-border-bottom {
  border-bottom: none;
}

然后写JS逻辑（如果数据是动态加载的，记得在渲染完成后调用这段代码）：

// 获取所有仪表盘项
const dashboardItems = document.querySelectorAll('.dashboard-item');
const totalItems = dashboardItems.length;

// 判断最后一行的元素数量：奇数时1个，偶数时2个
const lastRowCount = totalItems % 2 === 0 ? 2 : 1;

// 给最后一行的元素添加类
for (let i = totalItems - lastRowCount; i < totalItems; i++) {
  if (dashboardItems[i]) {
    dashboardItems[i].classList.add('no-border-bottom');
  }
}

这两个方案我都实际用过，纯CSS的更简洁省心，JS的兼容性拉满，你可以根据项目需求选~

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