Html CSS网格列周围的框阴影

我目前有一个CSS网格，其中有一个动态的行数，其中有一些行的子集应该分组在一起。我想用阴影将这些组的第一列包装在一起，但我不知道怎么做。我可以用边框来完成我想要的，因为我可以去掉中间元素的顶部和底部边框

有没有一种方法可以在有或没有网格布局的情况下实现这一点

.grid{
显示：网格；
网格模板列：250px 250px 250px；
栅柱间隙：20px；
}
顶部
中间的
.底部{
边框：2件纯黑；
}
.顶{
边框底部：无；
}
.中{
边界顶部：无；
边框底部：无；
}
.底部{
边界顶部：无；
}
.头衔{
文本对齐：居中；
填充：5px20px；
}
.标题跨度{
利润率：0.20px；
}
标题
.详情，
.行动{
文本对齐：居中；
垂直对齐：中间对齐；
保证金：自动0；
}

第1行标题
第1行详细信息
第1行行动
第2行标题
第2行详细信息
第2行行动
第3行有一个超长的瓷砖环绕
第3行详细信息
第3行行动
第4行标题
第4行详细信息
第4行行动
第5行标题
第5行详细信息
第5行行动
第6行标题
第6行详细信息
第6行行动

无法将样式应用于特定列或行中的所有网格项，也无法将其分组。您已经在执行直接针对元素的可能选项

---

黑胶溶液 在这里，我将使用您正在使用的

top

、

middle

和

bottom

类别以及框阴影的创建和效果：

• 对放置在第一列网格项后面的伪元素使用方便的

  框阴影

• 在网格项上使用

  background

  匹配列，从而隐藏行之间的阴影

• 现在使用

  边距

  在

  底部

  类中分隔

.grid{
显示：网格；
网格模板列：250px 250px 250px；
栅柱间隙：20px；
}
.托普：之后，
.中：之后，
.下：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
盒影：0px 10px 2px#ddd；
背景：#fff；
}
.title.bottom{
边缘底部：15px；
背景：透明；
}
.头衔{
文本对齐：居中；
位置：相对位置；
填充：5px20px；
背景：#fff；
}
.标题跨度{
利润率：0.20px；
}
标题
.详情，
.行动{
文本对齐：居中；
垂直对齐：中间对齐；
保证金：自动0；
}

第1行标题
第1行详细信息
第1行行动
第2行标题
第2行详细信息
第2行行动
第3行有一个超长的瓷砖环绕
第3行详细信息
第3行行动
第4行标题
第4行详细信息
第4行行动
第5行标题
第5行详细信息
第5行行动
第6行标题
第6行详细信息
第6行行动

我尝试了很多类似的方法，但都没有成功，所以谢谢！FWIW，如果其他人遇到这种情况，我的设置中还需要额外的步骤来实现这一点。另一个答案对弄明白这一点至关重要：。本质上，阴影没有显示，因此我需要将psuedo选择器的父项（.grid）设置为z索引为1的相对位置，以便阴影显示。