how to properly display dynamic flexible grid in grid style

Question

I have a case of a grid containing grids for a classic dashboard: dynamic number of groups where every group can contain dynamic number of elements

now i style it with grid but if on same row one group has many elements and one only few they keep same width and so row height increase too much

moreover is few groups remains in last row they does not span to entire row to better manage space

i found masonry library but only manage one level and my group element does not have fixed size

moreover masonry set fixed columns width while i need to dynamically adjust width of elements

is there a way to manage it? i prefer to avoid js but can try it if there are no other solutions

.container{
  display:grid;
  gap:2rem;
  grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
}

.group{
  display: grid;
  grid-template-columns: repeat(auto-fit,20rem);
  justify-content: space-evenly;
  gap:1rem;
  background-color:gray;
  padding:.6rem;
}

.box{
  width:10rem;
  height:3rem;
  background-color:green;
  text-align: center;
  padding:.6rem;
}

<div class="container">
  <div class="group">
    <div class="box">a1</div>
    <div class="box">a2</div>
  </div>
  <div class="group">
    <div class="box">b1</div>
    <div class="box">b2</div>
    <div class="box">b3</div>
    <div class="box">b4</div>
  </div>
  <div class="group">
    <div class="box">c1</div>
    <div class="box">c2</div>
  </div>
  <div class="group">
    <div class="box">d1</div>
    <div class="box">d2</div>
    <div class="box">d3</div>
    <div class="box">d4</div>
    <div class="box">d5</div>
    <div class="box">d6</div>
    <div class="box">d7</div>
    <div class="box">d8</div>
  </div>
  <div class="group">
   <div class="box">e1</div>
   <div class="box">e2</div>
  </div>
</div>