Css 响应网格瓷砖覆盖

我有这个网格（通常）你可以选择一个瓷砖。选定的平铺应具有透明的蓝色覆盖层。调整网格宽度时，如何在网格中使图像覆盖保持其容器的宽度

因此：

我做了。瓦片覆盖

位置：绝对，乍一看很不错。但这意味着我失去了响应能力，这意味着当平铺小于其最大尺寸时，覆盖层不会调整到其父级大小


.grid{
显示：网格；
栅隙：6px；
最大宽度：306px；
网格模板列：minmax（最小内容，150px）minmax（最小内容，150px）；
}
.瓷砖{
填充：0；
边界：0；
最大高度：150像素；
最大宽度：150px；
}
.tile__图像{
身高：100%；
宽度：100%；
最大高度：150像素；
最大宽度：150px；
显示：块；
对象匹配：包含；
}
.瓷砖覆盖层{
宽度：100%；
身高：100%；
背景色：rgba（29151255,0.9）；
}
为下面提到的内容添加了CSS

button.tile:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';
}
.tile{position:relative;}


.grid{
显示：网格；
栅隙：6px；
最大宽度：306px；
网格模板列：minmax（最小内容，150px）minmax（最小内容，150px）；
}
.瓷砖{
填充：0；
边界：0；
最大高度：150像素；
最大宽度：150px；
}
.tile__图像{
身高：100%；
宽度：100%；
最大高度：150像素；
最大宽度：150px；
显示：块；
对象匹配：包含；
}
.瓷砖覆盖层{
宽度：100%；
身高：100%；
背景色：rgba（29151255,0.9）；
}
按钮。瓷砖：之后{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景：hsla（240100%，50%，0.5411764705882353）；
z指数：999；
内容：''；
}
.tile{position:relative；}
使用
pseudo
代码，您可以轻松实现这一点。我还为视觉添加了活动类，
您可以在下面的类
tile:hover:：after


.grid{
显示：网格；
栅隙：16px；
最大宽度：306px；
网格模板列：minmax（最小内容，150px）minmax（最小内容，150px）；
}
.瓷砖{
填充：0；
边界：0；
最大高度：150像素；
最大宽度：150px；
位置：相对位置；
边框：1px实心透明；
}
.tile__图像{
身高：100%；
宽度：100%；
最大高度：150像素；
最大宽度：150px；
显示：块；
对象匹配：包含；
}
.tile:hover:：之后，
.tile:活动：：之后，
.tile:focus：：在，
.tile.active:：after{
内容：''；
宽度：100%；
身高：100%；
背景色：rgba（29151255,0.57）；
位置：绝对位置；
z指数：1；
左：0；
右：0；
排名：0；
底部：0；
盒影：0px 0px 5px 5px#6BA1F9；
边框：1px实心#FFFFFF AB；
边界半径：4px；
}
}
我昨天对此发表了评论，并给了您一个工作示例。提示是：绝对/相对。我甚至添加了一个计数器来显示你可以在中间添加你的副本：你可以从这里编辑你的代码，这样它就可以重新打开。