CSS Grid, empty row still adds gap

Question

I have a CSS grid, sometimes not all the elements are used. In the actual use case I am using the grid for input widgets, where there maybe extra help text or errors dropped into a specific grid-area. The problem I have is with grid-gap, if the row is empty, it still applies the gap. This results in a double row gap at bottom. Is there a way to disable showing gaps between empty rows?

I face this problem all the time, it makes grid gap unusable to me, so generally I don't use grid-gap, and use more complicated margin setups.

.parent {
  background: gray;
  padding: 16px;
  margin: 16px;
  display: grid;
  grid-template-columns: 64px 128px;
  grid-template-areas:
"childa childb"
"childc childd"
"childe childf";
  grid-gap: 16px;
}

[class^="child"] {
  background-color: red;   
}

.childa { grid-area: childa }
.childb { grid-area: childb }
.childc { grid-area: childc }
.childd { grid-area: childd }
.childe { grid-area: childe }
.childf { grid-area: childf }

<p>Grid gap is okay if all cells filled:</p>
<div class="parent">
  <span class="childa">cell A</span>
  <span class="childc">cell C</span>
  <span class="childb">cell B</span>
  <span class="childe">cell E</span>
  <span class="childf">cell F</span>
  <span class="childd">cell D</span>
</div>
<p>Note the double gap at the bottom due to the empty row:</p>
<div class="parent">
  <span class="childa">cell A</span>
  <span class="childb">cell B</span>
  <span class="childd">cell D</span>
</div>

Answer 1

Don't define areas, define positions:

.parent {
   background: gray;
   padding: 16px;
   margin: 16px;
   display: grid;
   grid-gap: 16px;
}
[class^="child"] {
   background-color: red;   
}
.childa { grid-area: 1/1 } /* row / column */
.childb { grid-area: 1/2 }
.childc { grid-area: 2/1 }
.childd { grid-area: 2/2 }
.childe { grid-area: 3/1 }
.childf { grid-area: 3/2 }
.childg { grid-area: 4/1 }

<div class="parent">
<span class="childa">cell A</span>
<span class="childc">cell C</span>
<span class="childb">cell B</span>
<span class="childe">cell E</span>
<span class="childf">cell F</span>
<span class="childd">cell D</span>
</div>

<div class="parent">
<span class="childa">cell A</span>
<span class="childb">cell B</span>
<span class="childd">cell D</span>
</div>

Also like below:

.parent {
   background: gray;
   padding: 16px;
   margin: 16px;
   display: grid;
   grid-auto-flow:dense; /* don't forget this */
   grid-gap: 16px;
}
[class^="child"] {
   background-color: red;   
}
.childa,
.childc,
.childe { grid-column: 1 } 

.childb,
.childd,
.childf { grid-column: 2 }

<div class="parent">
<span class="childa">cell A</span>
<span class="childc">cell C</span>
<span class="childb">cell B</span>
<span class="childe">cell E</span>
<span class="childf">cell F</span>
<span class="childd">cell D</span>
</div>

<div class="parent">
<span class="childa">cell A</span>
<span class="childb">cell B</span>
<span class="childd">cell D</span>
</div>

<div class="parent">
<span class="childa">cell A</span>
<span class="childb">cell B</span>
<span class="childf">cell F</span>
</div>