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.


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


div#container {
  display: grid;
    "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 :)




Css Grid