不幸的是，这似乎不可能与当前的CSS。
您可以编写一个sass函数来循环遍历每个span，并使用:nth-child()选择器为它提供一个网格区域，但这仍然会导致相同的CSS。
我认为counters可能会自动遍历每个span并指定一个显式的网格区域，尽管grid area属性不接受字符串值，因此与计数器不兼容。

.manSection {
  display: grid;
  height: 700px;
  width: 200px;
  grid-template-areas:
    ". a ."
    "b . c"
    ". d ."
    ". e ."
    ". f ."
    "k . g"
    "r . p"
    ". h .";
  row-gap: 10px;
  counter-reset: mygrid;
}

.manSection > span {
  counter-increment: mygrid;
  grid-area: counter(mygrid, alphabetic);
}

<section class="manSection">
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
  <span>Hi</span>
</section>