Javascript 如何使用css网格处理可变高度

我试图使用css网格设计这个布局，所以我设置了一个12列的容器和20px的边沟；问题是行的高度是可变的，而且我还不能将3个图像放在同一行中。我也不明白为什么有些图像甚至不在网格中

这是我的尝试，你能帮我理解我做错了什么吗

谢谢

.container{
宽度：100vw；
字体系列：helvetica、arial、无衬线字体；
显示：网格；
网格模板列：重复（12，1fr）；
柱间距：20px；
填充：0 50px；
}
.容器.标题h1{
字体大小：60px；
}
.容器.标题h2{
字体大小：40px；
字体大小：400；
文字装饰：下划线；
}
.容器.标题h2 a{
颜色：黑色；
}
.货柜名称{
网格柱：2/6；
}
.货柜{
字体系列：乔治亚、赫尔维蒂卡、arial、无衬线字体；
字号：28px；
格构柱：7/4跨；
}
#img-1{
格构柱：5/7跨；
}
#img-2{
格构柱：1/9跨；
}
#img-3{
格构柱：1/5跨；
}
#img-4{
格构柱：1/6跨；
}
#img-5{
格构柱：6/6跨；
}

Lorem Ipsum一些项目的标题在这里
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个通俗易懂的人。Nam finibus metus sed sem ultrices，非发酵玉米饼。未经许可的个人生活。克拉斯维尔卢克图斯扫描电镜。塞德·朗卡斯、佩鲁斯·埃吉特·达皮布斯·斯克利斯、布朗迪特·托托、以及非图尔皮斯猫。不含酒精、欧盟发酵罐、orci tortor viverra sem、酒后饮用

因为所有行的高度都相同，所以您需要重新考虑layout@Paulie_D该值是如何设置的？行的高度将是第一行的高度？或者是所有行中最高的一行？不。每行都有自己的高度，但您的布局无法适应。同一行中有不同大小的图像，因此我需要为行设置布局，并为每个项目指定布局，对吗？或者我也在考虑为每行嵌套一个12列的网格，并将它们作为单独的div，这样多个内部网格而不是一个外部网格，您会推荐这个解决方案吗？