Is there a way to collapse certain grid-gaps? - css

Question

I've setup a grid-template but a problem has arisen in the front-end template layer. Basically there comes a time when divs with assigned grid-areas conditionally render onto the page. Being that I have a grid-row-gap declaration in place, it maintains gaps of grid template areas that aren't present on the page. I was wondering if there was a way to collapse these gaps when this sort of thing occurs.
.grid {
display: grid;
grid-template-areas:
'a b'
'a c'
'a d'
'a e'
'a f';
grid-gap: 25px;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border: 1px solid #000;
}
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.e {
grid-area: e;
}
.f {
grid-area: f;
}
<div class="grid">
<div class="a cell">A</div>
<div class="b cell">B</div>
<!-- <div class="c cell">C</div> -->
<!-- <div class="d cell">D</div> -->
<div class="e cell">E</div>
<div class="f cell">F</div>
</div>

Answer 1

You can think it otherwise, use template and span instead area , and margin instead grid-gap.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 1em;
background: #bee;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border: 1px solid #000;
grid-column: 2;
}
.a {
grid-column: 1;
grid-row: 1 / span 10;
/* here what you think is enough */
}
.cell:nth-child(1)~.cell {
margin-left: 24px;
}
.cell:nth-child(2)~.cell {
margin-top: 24px;
<div class="grid">
<div class="a cell">A</div>
<div class="b cell">B</div>
<div class="c cell">C</div>
<div class="d cell">D</div>
<div class="e cell">E</div>
<div class="f cell">F</div>
</div>
<div class="grid">
<div class="a cell">A</div>
<div class="b cell">B</div>
<div class="d cell">D</div>
<div class="f cell">F</div>
</div>

Answer 2

Don't use template-areas and reply on auto placement:
.grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns */
column-gap: 25px;
margin:5px;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border: 1px solid #000;
}
.grid .a {
grid-row: span 5; /* take 5 rows */
}
/* to replace vertical gap, don't apply to "a" and last-child */
.cell:not(.a):not(:last-child) {
margin-bottom:25px;
}
<div class="grid">
<div class="a cell">A</div>
<div class="b cell">B</div>
<!-- <div class="c cell">C</div> -->
<!-- <div class="d cell">D</div> -->
<div class="e cell">E</div>
<div class="f cell">F</div>
</div>
<div class="grid">
<div class="a cell">A</div>
<div class="b cell">B</div>
<div class="c cell">C</div>
<!-- <div class="d cell">D</div> -->
<div class="e cell">E</div>
<div class="f cell">F</div>
</div>
<div class="grid">
<div class="a cell">A</div>
<div class="b cell">B</div>
<div class="c cell">C</div>
</div>