CSS Grid自动调整每行的宽度

Question

我有一些小盒子要摆放，我有一排盒子就像：3盒子，然后是第二排的2盒子......

到目前为止我所做的是基于flexbox（不是很容易“玩”），所以我尝试使用网格，并有一点问题。我在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