CSS Grid 布局中添加分隔线的4种实用方法

问题背景：Grid 布局中的分隔线需求

在开发网格布局时，我们经常会遇到需要在行与行之间添加分隔线的需求。以一个7列的网格为例：

css 复制代码

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <!-- 更多项目... -->
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 20px auto;
}

方法一：使用渐变背景实现分隔线

实现原理

通过CSS线性渐变创建重复的水平线条，模拟分隔线效果。

css 复制代码

.grid {
  --size: 54px; /* 每行高度 */
  position: relative;
}

.grid::before {
  content: '';
  position: absolute;
  inset: 10px 10px 11px; /* 底部多1像素避免溢出 */
  background: linear-gradient(
    transparent 0 calc(var(--size) - 1px), 
    #ccc 0
  ) 0 0 / 100% var(--size);
  pointer-events: none;
  z-index: 1;
}

优缺点分析

✅ 优点：

纯CSS实现，无需修改HTML结构
代码简洁，易于维护

❌ 缺点：

需要预先知道每行的固定高度
对动态高度的布局不适用

方法二：使用子元素边框实现分隔线

实现方案

css 复制代码

/* 为所有项目添加上边框 */
.grid-item {
  border-top: 1px solid #ccc;
}

/* 为第一行去除边框 */
.grid-item:nth-child(-n+7) {
  border-top: none;
}

处理最后一行边框的复杂选择器

scss 复制代码

/* 处理最后一行不同数量元素的情况 */
.grid-item:last-child:nth-child(7n+1),
.grid-item:nth-last-child(2):nth-child(7n+1),
.grid-item:nth-last-child(2):nth-child(7n+1) ~ .grid-item,
/* 其他情况... */ {
  border-bottom: none;
}

优缺点分析

✅ 优点：

实现简单直观
支持动态高度

❌ 缺点：

选择器复杂，特别是处理最后一行时
需要处理首尾行的特殊情况

方法三：使用伪元素实现分隔线

实现代码

css 复制代码

.grid {
  position: relative;
}

.grid-item:nth-child(7n+1):not(:nth-child(-n+7))::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background-color: #ccc;
  transform: translateY(-15px); /* 调整位置 */
}

技术要点

使用 nth-child(7n+1) 选择每行第一个元素
使用 :not(:nth-child(-n+7)) 排除第一行
使用"不完全绝对定位"技术（只设置水平定位）

优缺点分析

✅ 优点：

代码相对简洁
支持动态高度
视觉效果精确

❌ 缺点：

需要理解复杂的CSS选择器
定位计算可能需要调整

方法四：使用Grid行间隙模拟分隔线

css 复制代码

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 1px;
  background-color: #ccc;
}

.grid-item {
  background-color: white; /* 覆盖背景色 */
  padding: 10px;
}

优缺点分析

✅ 优点：

实现极其简单
浏览器原生支持，性能好

❌ 缺点：

分隔线样式受限
需要处理背景色的覆盖问题

方法对比与选择指南

实际应用建议

简单布局：优先考虑Grid行间隙方法
设计精确要求：使用伪元素方法
动态内容：子元素边框或伪元素方法
固定高度布局：渐变背景方法

扩展思考

如何实现垂直分隔线？
如何处理响应式布局中的分隔线？
如何在分隔线上添加特殊样式或图案？

/* 垂直分隔线示例 */ .grid-item:not(:nth-child(7n)) { border-right: 1px solid #ccc; }

通过掌握这些技巧，你可以轻松应对各种网格布局中的分隔线需求，而无需改变HTML结构或使用复杂的JavaScript方案。