我正在尝试使用 CSS 网格制作图像库。我需要这样的东西:

但所有能实现的就是这个JSFiddle。
问题是,DIV 占用了所有剩余空间,我不希望这样。
#gallery {
background: #cfc;
padding: 32px;
display: grid;
grid-auto-rows: 350px;
grid-template-columns: repeat(auto-fit, auto);
grid-gap: 10px;
}
.cell {
background: #fcc;
}
.cell>img {
height: 100%;
}Run Code Online (Sandbox Code Playgroud)
<div id="gallery">
<div class="cell">
<img src="http://via.placeholder.com/350x500" />
</div>
<div class="cell">
<img src="http://via.placeholder.com/250x150" />
</div>
<div class="cell">
<img src="http://via.placeholder.com/150x150" />
</div>
<div class="cell">
<img src="http://via.placeholder.com/370x150" />
</div>
</div>Run Code Online (Sandbox Code Playgroud)