纯CSS实现Grid网格块间横竖连线 线条不显示问题求解

你之前写的.bg::after方案失效的核心原因，是把连线元素绑在了卡片内部的子元素上，伪元素无法溢出到两个卡片之间的gap区域，自然没法形成跨卡片的连接线。
下面的方案不需要修改你现有的HTML循环结构，完全用CSS实现，适配你当前3列网格、30px间距、固定块尺寸的布局：

实现逻辑 #

1. 以网格容器为定位基准，把连线层放在卡片下层，避免连线遮挡卡片内容
2. 用CSS背景渐变批量绘制所有水平、垂直连接线，不需要给单个卡片单独加样式
3. 利用卡片自身的背景色挡住卡片下方的连线，仅让两个卡片之间gap区域的连线露出，形成自然的连接效果

可直接复用的CSS代码 #

替换你原有对应部分的CSS即可：

.block-map .block_grid {
    position: relative; /* 作为连线层的定位父级 */
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 30px; /* 预留边缘连线的显示空间 */
    column-gap: 30px;
    row-gap: 30px;
    /* 绘制所有水平连接线 */
    background-image: linear-gradient(to right, #2563eb 0, #2563eb 100%);
    background-size: calc(338px + 30px) 2px; /* 单根线长度=卡片宽度+列间距，2px为线粗 */
    background-repeat: repeat-y;
    background-position: calc(338px + 15px) 104.5px; /* 水平线垂直对齐卡片中线：149px卡片高度/2 + 30px顶部内边距 */
}
/* 绘制所有垂直连接线 */
.block-map .block_grid::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(to bottom, #2563eb 0, #2563eb 100%);
    background-size: 2px calc(149px + 30px); /* 单根垂直线长度=卡片高度+行间距，2px为线粗 */
    background-repeat: repeat-x;
    background-position: 383px calc(149px + 15px); /* 垂直线水平对齐卡片列间隙中线 */
}
.block-map .block_item {
    position: relative;
    z-index: 1; /* 让卡片层级高于连线，挡住卡片覆盖区域的线段 */
    background-color: #F5F5F5;
    border-bottom: 5px solid #5B8726;
    padding: 20px;
    font-size: 30px;
    text-align: left;
    width:338px;
    height: 149px;
    align-items: center;
    display: grid;
}
.block-map p.need {
    color: @grey;
    font-size:16px;
    font-family: @serif;
    font-weight: 700;
    margin: 0;
}
/* 删除原有无效的.bg::after相关样式即可 */

调整方法 #

如果后续修改布局参数，只需要对应调整几个数值即可：

• 修改连线颜色：替换代码中#2563eb为目标色值
• 修改连线粗细：调整background-size属性里的2px数值
• 修改卡片尺寸/间距：重新计算background-size和background-position里的对应计算值
• 如果需要隐藏网格边缘多余的线段，给网格容器加一层设置了overflow: hidden的父元素，裁掉超出范围的线段即可

这个方案没有额外DOM开销，不管你循环渲染多少个卡片，连线都会自动跟随网格布局生成，不会出现错位问题。

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