我可以在单行中填充图片并使用CSS网格布局保持宽高比简单吗？

Question

我想创建一个像这样的图片库：1.图片以其原始纵横比填充到指定宽度的容器中2.每行都有自己的高度，自动适应尽可能多的图片3.必须流动

只能通过CSS网格布局实现吗？

骨架代码笔在这里：https://codepen.io/minzojian/pen/MWwopXP

<div class="grid">
<img src="https://media-public.canva.com/MADTkhFsZ-A/1/thumbnail_large-2.jpg"/>
    <img src="https://media-public.canva.com/MADGvpvY3HA/7/thumbnail_large.jpg"/>
    <img src="https://media-public.canva.com/MADkaQ9LP_Y/1/thumbnail_large.jpg"/>
    <img src="https://media-public.canva.com/MADR_1AI5vk/1/thumbnail_large-1.jpg"/>
    <img src="https://media-public.canva.com/MADQ5O2kfiE/1/thumbnail_large-1.jpg"/>
    <img src="https://media-public.canva.com/MADGyf4KZA8/4/thumbnail_large.jpg"/>
    <img src="https://media-public.canva.com/MADT4-tuwa0/1/thumbnail_large-2.jpg"/>
    <img src="https://media-public.canva.com/MADSTxsB9aY/1/thumbnail_large-1.jpg"/>
</div>

.grid {
  width: 312px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid img {
  object-fit: contain;
}

Answer 1

您可以设置您的grid-template-columns和grid-template-rows值...，然后创建grid-template-areas，然后分配要进入哪个区域的内容。

grid-template-columns：.....无论如何grid-tmeplate-rows：.....任何

网格模板区域：“ A”，“ B”，“ C”，“ D”；

photo-b {网格区域：A 1； }

photo-c {网格区域：B 1； }

等。