html - CSS 网格。隐藏未使用区域

Question

我有基于已知元素的网格模板区域，但并非所有元素都可以从数据库中获取。如果我没有从数据库中得到一些东西，那么我就不会渲染 html 元素，我会得到一个带有间隙的空“虚线”行。见附图，空行位于蓝色框下方。是否可以隐藏未使用的区域或从中去除间隙？

*{
 margin: 0;
 padding: 0;
}

.name {
  grid-area: name;
}

.lastname{
  grid-area: lastname;
}

.phone {
  grid-area: phone;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    'name name name lastname lastname lastname'
    'somethingelse somethingelse somethingelse . . .'
    'phone phone phone phone phone phone'
    'email email email email email email';
}

<div class="wrapper">
  <div class="field name">
    <div class="titile">Name</div>
    <div class="description">Antony</div>
  </div>
  <div class="field lastname">
    <div class="titile">Last name</div>
    <div class="description">Lastnamed</div>
  </div>
  <div class="field phone">
    <div class="titile">Phone number</div>
    <div class="description">123 456 789</div>
  </div>
</div>

与我的问题无关
This 问题与我无关，因为我没有空元素。我有空行，没有带间隙的 html 元素

Answer 1

一个月前我遇到了完全相同的问题。我没有空边框，因为我没有渲染我没有从数据库中得到的块(我使用 Angular 的 *ngIf 来不渲染可能是空的块)，所以只有多余的间隙会导致问题。我最终没有使用 grid-gap，我只是在块中添加了右侧和底部边距，所以我只有一个“间隙”，即块之间的边距。现在还可以，但是有“可折叠的网格间隙”会很好:)
这是我的代码，经过极端简化，当然......并注意我使用 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. */

我想强调的是，这只是一种解决方法。我很高兴看到解决方案:)