带有 CSS 网格的流体相册

问题描述

我有一个关于 CSS 网格的小问题，并用它制作一个流畅的、响应式的照片库。有些照片应该更宽（风景），有些照片应该更高（肖像）。另外，我的目标是在它们周围没有任何空白区域，并且仍然使照片保持正常的纵横比。
下面是我想出的代码，它基本上可以很好地完成工作，但我想知道是否有更好的方法来使用网格来做到这一点。
目前我的知识仅限于 HTML 和 CSS，所以我挑战自己用我拥有的工具来做。 :)
我已经缩短了 HTML 代码，因为它会重复。
感谢您的任何帮助！ :)

<div class="photoGrid">
   <div class="horizontal"><img src="./photos/1.jpeg" alt=""></div>
   <div><img src="./photos/2.jpeg" alt=""></div>
   <div><img src="./photos/3.jpeg" alt=""></div>
   <div class="horizontal"><img src="./photos/4.jpeg" alt=""></div>
   <div><img src="./photos/5.jpeg" alt=""></div>
     ........
   <div><img src="./photos/18.jpeg" alt=""></div>
   <div class="horizontal"><img src="./photos/19.jpeg" alt=""></div>
   <div><img src="./photos/20.jpeg" alt=""></div>
   <div class="horizontal"><img src="./photos/21.jpeg" alt=""></div>
</div>

* {
    Box-sizing: border-Box;
    margin: 0;
    padding: 0;
}

.photoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-gap: 10px;
    grid-auto-flow: dense;
}

.horizontal {
    grid-column: span 2;
}

.photoGrid img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）