CSS Grid, empty row still adds gap
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 }
.childg { grid-area: childg }<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>Solution 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>