使用网格模板区域而不为每个区域定义类

Question

我想像这样使用网格模板CSS：

.grid{
  display: grid;
  grid-template-areas:
      'a b c d'
      'e e e f'
      'g g h h'
      'g g i j'
      'm l l o'
      'n k p o'
      'q q q o'
  ;
  grid-gap:5px;
  margin:auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid > div {
  background-color: white;
}

/* looking for a way to trim this part of css */
.a {grid-area:a}
.b {grid-area:b}
.c {grid-area:c}
.d {grid-area:d}
.e {grid-area:e}
.f {grid-area:f}
.g {grid-area:g}
.h {grid-area:h}
.i {grid-area:i}
.j {grid-area:j}
.k {grid-area:k}
.l {grid-area:l}
.m {grid-area:m}
.n {grid-area:n}
.o {grid-area:o}
.p {grid-area:p}
.q {grid-area:q}
/* <-- */

<div class="grid">
    <div class="item a">a </div>
    <div class="item b">b </div>
    <div class="item c">c </div>
    <div class="item d">d </div>
    <div class="item e">e </div>
    <div class="item f">f </div>
    <div class="item g">g </div>
    <div class="item h">h </div>
    <div class="item i">i </div>
    <div class="item j">j </div>
    <div class="item k">k </div>
    <div class="item l">l </div>
    <div class="item m">m </div>
    <div class="item n">n </div>
    <div class="item o">o </div>
    <div class="item p">p </div>
    <div class="item q">q </div>
</div>

感觉像为每个区域声明一个CSS类都是多余的。有没有办法使网格区域默认为类名？就像我的示例：.a == grid-area：a无需显式声明每个CSS类？