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>

与我的问题无关

这个问题与我无关，因为我没有空项目。我有空行，没有带间隙的 html 项目

Answer 1

您需要命名模板区域吗？

您能否定义某些网格项应跨越多少列？

.name { 
  grid-column: span 3;
}

.lastname {
  grid-column: span 3;
}

.phone { 
  grid-column: span 6;
}

.wrapper {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}