In my CSS grid layout, I have some elements that span multiple rows. I've been trying to adjust the positioning so that the lower elements fit snugly against the ones above them, but they are sticking to the bottom of the grid no matter what I do.
Even setting align-items to start or stretch doesn't resolve the issue.
ul {
display: grid;
grid-template-areas:
"a b"
"c b"
"c d";
grid-template-columns: repeat(2, minmax(140px, 1fr));
grid-template-rows: repeat(3, auto);
grid-gap: 10px;
align-items: start;
}
.a { grid-area: a; }
.b { grid-area: b; height: 5em; }
.c { grid-area: c; height: 10em; }
.d { grid-area: d; }
<ul>
<li class="a">A</li>
<li class="b">B</li>
<li class="c">C</li>
<li class="d">D</li>
</ul>
When implementing this code, A and C touch as desired, but B and D remain separated unless additional content is added to D. My objective is to have B & D touch each other while maintaining a gap at the bottom (or causing D to fill up the remaining space).
For a visual representation, you can view the Fiddle here: https://jsfiddle.net/JasonTank/Ltkhn6so/14/