如何确定CSS网格中的列数是列数的一个因素？

Question

我想确保对于所有浏览器尺寸，CSS网格中的最后一行都具有与网格中其他行相同数量的项目。

此刻，我尝试使用具有自动填充和minmax功能的重复，将max设置为4fr。我正在尝试显示8张图像，但是如果浏览器缩小了四列，至少不能容纳最小的大小，并且它显示了三列，那么最后一行只有两列，看起来很难看。

这是我的HTML：

<div class="container">
  <img src="img/img_1.png">
  <img src="img/img_2.png">
  <img src="img/img_3.png">
  <img src="img/img_4.png">
  <img src="img/img_5.png">
  <img src="img/img_6.png">
  <img src="img/img_7.png">
  <img src="img/img_8.png">
</div>

这是我的CSS：

.container {
    display: grid;
    flex-wrap: wrap;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, minmax(350px, 4fr));
    grid-template-rows: 1fr;
    justify-items: center;
}

.container > img {
    object-fit: stretch;
    height: 350px;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

理想的情况是，如果一行中的三个图像可以容纳，则它每行中要容纳2个，并且图像应位于行的中央。

当前：

<img><img><img>
<img><img><img>
<img><img>

想要：

  <img><img>  
  <img><img>  
  <img><img>  
  <img><img>