CSS Grid Irregular horizontal breaks

Question

I have a simple grid of 2 columns and elements within of different row height that can be of dynamic height.

HTML

<div
    id="widget-grid-display">
    <div
      id="widget-1">
      <ITEM_1 />
    </div>
    <div
      id="widget-2">
      <ITEM_2 />
    </div>
    <div
      id="widget-3">
      <ITEM_3 />
    </div>
  </div>

CSS

div#widget-grid-display {
   display: grid;
   align-items: start;
   gap: 20px;
   grid-template-columns: minmax(auto, 850px) minmax(auto, 502px);
} 
div#widget-grid-display div#widget-1 {
   grid-row: 1;
   grid-column: 2;
} 
div#widget-grid-display div#widget-2{
   grid-row: 2;
   grid-column: 2;
} 
div#widget-grid-display div#widget-3 {
   grid-row: 1;
   grid-column: 1;
}

When using a single grid and populating the elements, I get empty spaces in the grid like these:

Is it possible to fill in this empty space by making the bottom element (widget-2 in this case), to overflow to fill in the space ?

Or adjust the grid-row to allow for such total align-items start approach to fill this empty gap.

---

I found the amazing masonry for css-grid - which is exactly what I needed. But I see it's only Firefox supported.

Is there a masonry stle for css-grid cross-borwser-compatibility ?