CSS网格区域属性不响应

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;
}

除了grid-area属性外，一切似乎都应运而生。我尝试了很多事情。似乎没有任何解决办法。请帮忙！

.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>

索引页

<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，如果我要这样写的话：

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

有效。