how to setup desandro masonry to auto arrange element width to fit content?

I have a nested dinamic grids page that i want to layout as best as possible

as suggested in CSS-only masonry layout i imported desandro masonry and try to use it but it does not manage well horizontal and vertical completly dynamic size.

i don’t have any information about elements number or size, iam looking to a way to make them spread on page using well available space.

as you can see, firts sub-grid does not increase in width to use less vertical space

the same for all columns: width is simply the minimum to keep content, it does not try to recuce rows

if you setup .grid-item to be display: flex; every item width become the sum of all elements, without trying to increase height to better fill content

is it possibile to setup library to achieve better result or there are alternative libraries to manage that dynamic layout?

thanks

* { box-sizing: border-box; }


/* ---- grid-item ---- */

.grid-item {

  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<h1>Masonry - Initialize in HTML</h1>

<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
  <div class="grid-item">
    <div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
      <div class="grid-item">
        tre
      </div>
      <div class="grid-item">
        tre
      </div>
       <div class="grid-item">
        tre
      </div>
       <div class="grid-item">
        tre
      </div>
       <div class="grid-item">
        tre
      </div>
       <div class="grid-item">
        tre
      </div>
     </div>
  </div>
  <div class="grid-item">
    <p>casa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
    <p>casacasacasacasacasacasa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p><p>casa</p>
  </div>
  <div class="grid-item">
    <p>casacasacasacasacasacasa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p><p>casa</p>
  </div>
  <div class="grid-item">
    <p>casa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
    <p>casa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
    <p>casacasacasacasacasacasacasacasacasacasacasacasacasacasacasa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
     <p>casacasacasacasacasacasacasacasacasacasacasacasacasacasacasa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
     <p>casacasacasacasacasacasacasacasacasacasacasacasacasacasacasa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
     <p>casa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
     <p>casa</p>
    <p>casa</p>
  </div>
  <div class="grid-item">
     <p>casacasacasacasacasacasa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p>
    <p>casa</p><p>casa</p>
  </div>
  <div class="grid-item">
     <p>casacasacasacasacasacasa</p>
    <p>casa</p>

    <p>casa</p>
    <p>casa</p><p>casa</p>
  </div>
  <div class="grid-item">
    <p>casa</p>
    <p>casa</p><p>casa</p>
  </div>
  <div class="grid-item">
    <p>casa</p>
    <p>casa</p><p>casa</p>
  </div>

</div>