css grid area property does not respond

Question

<style>
.grid {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: 40px 40px 40px 40px;
  background-color: yellow;
  grid-gap: 10px;
  grid-template-areas:
  "a b b b"
  "a b b b"
  "c c c e"
  "f f e e";
}

.content {
  background-color: lightblue;
}

Everything seems to be working how it should except grid-area property. I tried so many things. Nothing seems to fix it. Please help!

.content:nth-child(1) { grid-area: a; }
.content:nth-child(2) { grid-area: b; }
.content:nth-child(3) { grid-area: c; }
.content:nth-child(4) { grid-area: d; }
.content:nth-child(5) { grid-area: e; }
.content:nth-child(6) { grid-area: f; } 
</style>

index page

<div class="grid">
  <div class=" content"> A </div>
  <div class=" content"> B </div>
  <div class=" content"> C </div>
  <div class=" content"> D </div>
  <div class=" content"> E </div>
  <div class="content"> F </div>
</div>

P.S if I would write it like this:

.content:nth-child(1) { grid-area:3/1/5/5; }

It works.