能否无需逐个声明，在CSS中使用命名Grid Area配置grid-template-areas？

不行，你必须为每个需要对应到命名网格区域的元素单独声明grid-area属性。grid-template-areas只是用来定义网格的区域布局结构，它无法自动将元素和这些命名区域关联起来。

在你提供的代码里，所有<span>元素都没有指定grid-area，所以它们会按照Grid布局的默认规则自动填充到网格单元格中，不会对应到你定义的a、b、c等命名区域。

你可以通过两种方式来实现元素与命名区域的绑定：

方式1：使用:nth-child()选择器批量绑定 #

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

/* 按元素顺序对应到命名区域 */
.manSection span:nth-child(1) { grid-area: a; }
.manSection span:nth-child(2) { grid-area: b; }
.manSection span:nth-child(3) { grid-area: c; }
.manSection span:nth-child(4) { grid-area: d; }
.manSection span:nth-child(5) { grid-area: e; }
.manSection span:nth-child(6) { grid-area: f; }
.manSection span:nth-child(7) { grid-area: g; }
.manSection span:nth-child(8) { grid-area: h; }
.manSection span:nth-child(9) { grid-area: k; }
.manSection span:nth-child(10) { grid-area: r; }
.manSection span:nth-child(11) { grid-area: p; }

方式2：给元素添加类名绑定（可读性更强） #

修改后的HTML：

<section class="manSection">
  <span class="area-a">Hi</span>
  <span class="area-b">Hi</span>
  <span class="area-c">Hi</span>
  <span class="area-d">Hi</span>
  <span class="area-e">Hi</span>
  <span class="area-f">Hi</span>
  <span class="area-g">Hi</span>
  <span class="area-h">Hi</span>
  <span class="area-k">Hi</span>
  <span class="area-r">Hi</span>
  <span class="area-p">Hi</span>
</section>

对应的CSS：

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

.area-a { grid-area: a; }
.area-b { grid-area: b; }
.area-c { grid-area: c; }
.area-d { grid-area: d; }
.area-e { grid-area: e; }
.area-f { grid-area: f; }
.area-g { grid-area: g; }
.area-h { grid-area: h; }
.area-k { grid-area: k; }
.area-r { grid-area: r; }
.area-p { grid-area: p; }

如果觉得逐个声明太繁琐，也可以借助CSS预处理器（比如Sass）的循环功能批量生成样式，但原生CSS里没有自动绑定的机制，必须明确建立元素和命名区域的关联。

内容的提问来源于stack exchange，提问作者NoOneCare