CSS Grid. Hide unused area

I had the exact same problem a month ago. I didn't have empty borders, because I did not render the blocks I didn't get from the database (I use Angular's *ngIf to not render the blocks which would be empty), so only the excess gaps caused problem. I ended up not using grid-gap, I simply added right and bottom margins to the blocks, so I only got single "gaps", that is margins between blocks. It's OK for now, but it would be nice to have "collapsible grid-gap" :)

Here is my code, after extreme simplification, of course... and note that I use Angular.

HTML:

<div id="container">
  <div id="block-0-0" class="block" *ngIf="data[0][0]">
    <app-block [block-data]="data[0][0]"></app-block>
  </div>
  <div id="block-0-1" class="block" *ngIf="data[0][1]">
    <app-block [block-data]="data[0][1]"></app-block>
  </div>
  <div id="block-1-0" class="block" *ngIf="data[1][0]">
    <app-block [block-data]="data[1][0]"></app-block>
  </div>
  <div id="block-1-1" class="block" *ngIf="data[1][1]">
    <app-block [block-data]="data[1][1]"></app-block>
  </div>
  <!-- etc. -->
</div>

CSS:

div#container {
  display: grid;
  grid-template:
    "block-0-0 block-0-1" auto
    "block-1-0 block-1-1" auto
    /* etc. */
    / 300px 300px;
}

div.block {
  margin: 0 10px 10px 0;
  border: solid 1px gray;
}

div#block-0-0 {
  grid-area: block-0-0;
}

div#block-0-1 {
  grid-area: block-0-1;
}

div#block-1-0 {
  grid-area: block-1-0;
}

div#block-1-1 {
  grid-area: block-1-1;
}

/* etc. */

I'd like to emphasize that this is only a workaround. I'd be happy to see The Solution :)