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>

我试过使用自动填充，但它不起作用。我很确定答案并没有那么难，但它可能是一个函数，或者我不知道，当我在谷歌上搜索时，我看到了一个函数“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