Html 如何在照片网格中的网格项目上放置链接和文本

我制作了一个响应性强的照片网格，其中每个网格项都作为一个带有文本覆盖的图像容器。然后，链接跨越网格项以进行导航。网格项以不同的纵横比拍摄图像，保留纵横比并剪裁多余部分以填充网格框

使用CSS网格或flexbox实现这一点的最佳方法是什么？ 我在下面发布了两种不同的方法，两种方法都有效，但哪种方法最正确？只需在

项目名称
项目名称
项目名称
项目名称
项目名称
项目名称
项目名称
项目名称

使用定位非常好，我喜欢在

a

元素中包装

img

。无论如何，这里有一种方法不使用定位，而是在

磁贴上使用一个内部网格：


使每个
平铺
成为网格容器

通过使用
网格行：1
和
网格列：1
将
h4
和
a
明确放置在第一行和第一列中

现在，您可以将
align self:flex start
添加到
h4
以将其定位到顶部（您可以调整
align self
进行垂直定位）


请参见下面的演示：


html{
字体系列：arial；
字体大小：100%；
颜色：#CCC；
}
* {
框大小：边框框；
}
福托格里德先生{
显示：网格；
网格模板列：重复（自动拟合，最小值（260px，1fr））；
网格间距：1米；
}
.瓷砖{
位置：相对位置；
宽度：100%；
边框：1px纯黑；
显示：栅格；/*内部栅格*/
}
.瓷砖a{
网格行：1；/*位于第一行*/
网格列：1；/*放置在第一列中*/
}
.瓷砖img{
对象匹配：覆盖；
显示：块；
身高：100%；
宽度：100%；
}
.瓷砖h4{
保证金：0；
背景色：#000；
填充：10px 14px；
不透明度：.8；
网格行：1；/*位于第一行*/
网格列：1；/*放置在第一列中*/
自对齐：柔性开始；/*自动调整宽度*/
}
.tile:悬停{
边框：1px实心#0066FF；
不透明度：.55；
}

项目名称
项目名称
项目名称
项目名称
项目名称
项目名称
项目名称
项目名称