<分区>
我正在制作一个网格布局，它根据页面的宽度调整不同数量的元素(正方形)的大小，并将不适合在同一行上的元素换行到下一行。
我已经尝试了很多方法，例如使用 vw 和删除 minmax，但似乎都没有得到我想要的结果。这是当前的代码:
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.grid-item {
background-image: url('../mood.jpg'); /*square image*/
background-repeat: no-repeat;
background-size: contain;
align-content: center;
color: black;
height: 8rem;
}
html:
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
现在它在图像右侧有一些额外的空间，我希望缩放高度以适应该额外空间。
编辑:Here's a pen更彻底地说明了问题。网格项不是正方形，而是矩形，我希望它们是正方形。