Css 具有列填充父项的相对定位子项

我想创建一个布局，当div到达底部时，它们将从顶部继续。看我画的（超级花式）图像：

我通过使用

列填充：auto

使其工作。现在我想在单击每个项目时添加一个调光器。我正在为我的应用程序使用React和Semantic UI React，所以我试图通过它们的组件实现这一点

我的问题是，当我激活调光器时，它不是“调光”整个项目。我为我的问题制作了一个小的代码沙盒，这样我们可以更容易地调试它。当您按下第三项时，您可以看到来自顶部的零件没有变暗。我认为这是因为调光器的位置是相对的

链接：

我希望我对我的问题描述得足够好，我们可以一起解决这个问题

---

干杯

我怀疑你能用覆盖层做到这一点，不管它的位置如何。@Paulie\u这也是我的感觉。一直试图用CSS网格和Flexbox实现类似的效果，但失败了。旁注，你的评论在css技巧上帮助了我很多次（认出了你的个人资料图片）：-）