CSS grid-template-areas not working as expected

Question

.content {
  width: 600px;
  height: 600px;
  border: 4px solid lime;
  display: grid;
  grid-template-areas:
    'a d'
    'b d'
    'c d';
}

textarea, iframe {
  margin: 0;
  box-sizing: border-box;
}

.content > .a {grid-area: "a";}
.content > .b {grid-area: "b";}
.content > .c {grid-area: "c";}
.content > .d {grid-area: "d"; height: 100% !important; width: 100% !important;}

<div class="content">
  <textarea class="a">a</textarea>
  <textarea class="b">b</textarea>
  <textarea class="c">c</textarea>
  <iframe class="d"></iframe>
</div>

I expected the grid to look like this:

a d
b d
c d

but instead, as can be seen above, it ends up looking like this:

a b
c d
c d
. .

What am i doing wrong?

Adding

grid-template-rows: 3;
grid-template-columns: 2;

also didn't help.

Answer 1

using the snippet below might help.

.content {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
    "a d"
    "b d"
    "c d"
}