Html 将网格项与不同高度对齐

我已经用图像和图像下的文本构建了一个网格。有些图像的高度不同，我得到了一个“楼梯效果”，看起来像这样

我更喜欢的是一个版本，在这个版本中，图像下面的所有文本都是对齐的，并且图像是对齐的 底部对齐

我想给

img

的容器

relative

定位，然后将

img

设置为

位置：绝对底部的code>：0

将解决此问题，但没有骰子

如果我给

img

的容器一个像素高度，它就解决了这个问题，但是当我开始调整浏览器的大小时，

img

容器的高度保持在一个固定的高度，在小屏幕上看起来不太好

您知道如何自动设置

img

容器高度（用于响应）并保持图像和文本对齐吗

我在这里设置了一个代码笔：

感谢您的帮助。提前谢谢

添加以下css：

.row > ul > li{
  display: table-cell;
  vertical-align: top;
}

然后移除定位图像的

img

样式

---

这会使所有的

img

s顶部对齐，而标题不对齐。我希望所有的图像都与底部对齐，所有的文本也要对齐@这仍然不能解决问题。当您调整浏览器的大小时，高度保持不变，网格项目之间会有巨大的空间。