【问题标题】：can i fill pictures in a single row and keep aspect ratio simple with css grid layout我可以在单行中填充图片并使用 css 网格布局保持纵横比简单吗
【发布时间】：2020-03-01 08:43:19
【问题描述】：

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

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

skeleton codepen 在这里：
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;
}

【问题讨论】：

标签： html css css-grid

【解决方案1】：

你可以设置你的 grid-template-columns 和 grid-template-rows 值...然后创建 grid-template-areas 然后指定你想进入哪个区域。

grid-template-columns: .....随便 grid-tmeplate-rows: .....随便

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

照片-b { 网格区域：A 1; }

照片-c { 网格区域：B 1; }

等等。

【讨论】：