如何为CSS Grid布局的每一行添加位于元素下层的支撑横线

不用修改现有HTML结构，也不需要JS介入，仅新增少量CSS样式即可实现需求：

body {
  width: 90%;
  max-width: 300px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica,  sans-serif;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, auto));
  gap: 20px;
  grid-auto-rows: minmax(30px, auto);
  /* 新增样式 */
  overflow-x: hidden;
  position: relative;
  padding-bottom: 8px; /* 可调整底部留白，数值小于6px可隐藏最后一行的横线 */
}

.container > div {
  border-radius: 5px;
  background-color: rgb(36,33,33);
  /* 新增样式 */
  position: relative;
}

/* 新增伪元素实现横线 */
.container > div::after {
  content: '';
  position: absolute;
  /* 调整数值控制横线和图标的垂直间距 */
  top: calc(100% + 4px);
  left: 0;
  /* 设置超大宽度保证覆盖整行 */
  width: 100vw;
  height: 2px;
  background-color: #ccc;
  z-index: -1;
}

实现原理 #

• 每个网格项的::after伪元素生成一条超宽灰色横线，层级低于网格项，不会遮挡图标
• 容器设置overflow-x: hidden裁掉超出容器宽度的横线部分，自动得到和行宽一致的支撑线
• 同一行所有网格项的横线纵坐标完全一致，视觉上自动拼接为完整的一条，无需额外处理拼接逻辑
• 完全适配Grid自动换行规则，图标数量、容器宽度变化都不需要调整代码

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