Html CSS网格图像库布局底部基线对于不同的屏幕大小不一致

我目前正在为我的摄影网站尝试布局，我想使用CSS网格布局，因为我可以以非常灵活的方式为不同屏幕大小的图像重新排序。我知道，这种布局可以通过flex实现，甚至可以通过将divs设置为

dispay:inline block

来实现，但是这种解决方案不允许我灵活地重新排列图像

这样看起来很好，但是如果我调整浏览器窗口的大小或只是在另一个屏幕上显示它，底部基线就会被弄乱，如下图所示

这就是相关HTML的外观

<div class="galleryblock">
        <div class="image1"><img src="static/photos/plansee-glow.jpg" alt=""></div>
        <div class="image2"><img src="static/photos/giaupass.jpg" alt=""></div>
        <div class="image3"><img src="static/photos/eibsee.jpg" alt=""></div>
        <div class="image4"><img src="static/photos/hintersee.jpg" alt=""></div>
        <div class="image5"><img src="static/photos/marilena.jpg" alt=""></div>
        <div class="image6"><img src="static/photos/jack.jpg" alt=""></div>
        <div class="image7"><img src="static/photos/loser-cassi.jpg" alt=""></div>
        <div class="image8"><img src="static/photos/plansee-hype.jpg" alt=""></div>
        <div class="image9"><img src="static/photos/obersee-huette.jpg" alt=""></div>
        <div class="image10"><img src="static/photos/plansee-birdseye.jpg" alt=""></div>
        <div class="image11"><img src="static/photos/mariagern.jpg" alt=""></div>
        <div class="image12"><img src="static/photos/neuschwanstein.jpg" alt=""></div>
        <div class="image13"><img src="static/photos/Kirkjufell2.jpg" alt=""></div>
        <div class="image14"><img src="static/photos/eibsee-bruecke.jpg" alt=""></div>
        <div class="image15"><img src="static/photos/obersee-mood.jpg" alt=""></div>
    </div>

通过使用

网格区域：imgX，将image1到image15类的所有div分配到相应的网格模板区域

我知道，图像具有不同的纵横比，而横向格式的图片是3:2，纵向格式的图片是4:5。但是，每一列的高度应该相等，因为图片的总和（1个横向和2个纵向）总是相同的。如果我将横向格式图片的高度除以纵向格式图片的高度，我得到0.8作为高度之间的种类比率。这就是为什么我在css中为
网格模板行
尝试了
0.81fr
和
0.84fr
左右的值。根据屏幕大小的不同，这些值中的一个工作正常，或者扰乱了基线

我还尝试使用以照片为背景图像的div，但随后我必须使用JavaScript手动设置高度，如果可能的话，我希望避免这种情况。我查看了css网格的不同属性，但是如果图像太长并且提供了一个固定的底部基线，我找不到任何只会截断图像的属性

我的用例是否因为不同的高度内容而不可能用于网格布局？在制作中，我会重复这样的块。我知道我可以使用flex的列布局，但在较小的屏幕上，这会将右上角的图像推到非常低的位置，如果你知道我的意思，我更希望在大屏幕上首先出现的图像也在较小的屏幕上出现

提前非常感谢您在我的问题上投入了大量时间，如果不是我自己尝试通过大量尝试、失败和谷歌搜索来解决这个问题，我就不会发布这个问题。
使用底部图像的
align self:end
解决了这个问题。这意味着，图像之间的间隙不会完全相同，但除非你仔细观察，否则它是不可见的

div.galleryblock{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 0.81fr 1fr 0.81fr 1fr;


    grid-template-areas:
        "img1  img2  img3 img4   img5"
        "img1  img7  img3 img9   img5"
        "img6  img7  img8 img9   img10"
        "img6  img12 img8 img14  img10 "
        "img11 img12 img13 img14 img15";

    grid-gap: 0.5em;
}