CSS网格自动调整每行的宽度

Question

我要放一些小盒子，还有几排盒子，例如：3个盒子，第二排是2个盒子，等等...

到目前为止，我所做的是基于flexbox的（并不是很容易“玩”），所以我尝试使用grid，但有一些问题。我在flexbox中所做的（这是我在台式机上想要的，但是当然，在调整大小时，它不合适。）这就是flexbox的作用：

但是，当我调整浏览器大小时：

因此，我知道flexbox并不是真正做到那样的网格。所以我尝试了另一种方法，使用网格。我知道如何在每一行上创建具有相同内容的网格，但是我不知道如何在没有相同内容的情况下完成网格。

这是我想像的一小段：

.boxes_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 30px;
}

<div class="boxes_container">
  <div class="box">
    <img src="http://placehold.it/347x252">
  </div>
  <div class="box">
    <img src="http://placehold.it/347x252">
  </div>
  <div class="box">
    <img src="http://placehold.it/347x252">
  </div>
  <div class="box">
    <img src="http://placehold.it/538x240">
  </div>
  <div class="box">
    <img src="http://placehold.it/538x240">
  </div>
</div>

我尝试使用自动填充功能，但这不起作用。我很确定答案并不难，但是可能是一种功能，或者我不知道，当我在Google上进行搜索时，我看到了一个函数“ fit-content（）”，但实际上并不确定在那儿工作。试图做一些事情，但没有解决。

感谢您的帮助。

Answer 1

这两个布局示例中的任何一个都与您要达到的目标接近吗？ -您需要调整浏览器窗口的大小以查看折叠的布局。

1) 3,2 >> 2,1,2 >> 1,1,1,1,1 

https://codepen.io/FEARtheMoose/pen/WgOwRV?editors=1100#0

2) 3,2 >> 1,1,1,1,1 

https://codepen.io/FEARtheMoose/pen/KxqzoV?editors=1100#0

这也是我的意思的一个例子，如果您可以在3,3,2中放置6个盒子，那么它会变得更加整洁。 https://codepen.io/FEARtheMoose/pen/rZwevy?editors=1100#0