"surely it isnt that hard to get layouts like this with those gaps, right?"

EDIT: "why does [x] not work?" this is why
it lets you basically use ascii art to draw out your table!
css:
.container {
display: grid;
grid-template-areas:
'a c d d'
'b c f g'
'e e e g'
;
grid-gap: 10px 10px;
}
.container > span {
border: thin solid black;
display: flex;
align-items: center;
justify-content: center;
min-height: 3em;
}
html:
<div class="container">
<span style="grid-area: a;">a</span>
<span style="grid-area: b;">b</span>
<span style="grid-area: c;">c</span>
<span style="grid-area: d;">d</span>
<span style="grid-area: e;">e</span>
<span style="grid-area: f;">f</span>
<span style="grid-area: g;">g</span>
</div>
IMO, way easier and cleaner than the old <table> approach, bc you can just glance at the template areas and see what the table is.
.png)
