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

Также вот пример того, что я имею в виду, если бы вы могли иметь 6 коробок в 3,3,2, то они бы упали ниже. https://codepen.io/FEARtheMoose/pen/rZwevy?editors=1100#0