Html 完整的出血细节为响应列表

我有一个项目列表，可以展开以显示更多详细信息（类别项目2可展开）， 我使用两个嵌套的网格达到了这一点。哪一个可能不是最好的解决方案

我的问题是，我希望细节的背景展开，直到布局的侧面与标题相似

发件人：

致：

这样做的一种方法是在每一面都增加相当大的边距，并用填充物进行补偿，但有没有更优雅的方法来实现这种布局

const detail=document.getElementById（“detail”）
函数toggleDetails（）{
detail.classList.toggle（“可见”）；
}

.container{
显示：网格；
网格模板列：
[完全启动]最小最大值（1rem，1fr）
[主起点]最小值（0，40em）[主终点]
最小最大值（1rem，1fr）[满端]；
网格间距：1rem；
背景：#eee；
}
.容器>*{
网格柱：主；
}
.标题{
网格列：满；
背景：白色；
}
.类别{
列表样式：无；
填充：0；
显示：网格；
网格模板列：重复（自动拟合，最小值（9rem，1fr））；
网格自动流动：稠密；
差距：1勒姆；
}
.categories>li{
边框：1px固体石灰；
}
#细部{
显示：无；
网格柱：1/-1；
背景：白色；
}
#细节可见{
显示：首字母；
}
身体{
保证金：0；
}

无名氏
类别：

第一类
第2类
+

Lorem ipsum dolor坐在阿迪皮斯精英的位子上。耳透明体、驱虫物、发明者的暂时性责任，以及在实验中的面部不等长部位
第3类
第4类

在不改变整个布局的情况下，我认为您无法做到。另一种解决方案是在之前和之后使用伪元素。但我不认为这个解决方案很“优雅”，因为我对这个建议提出了这样的建议：是的。差不多吧。很高兴我能帮忙。