CSS3 - 网格模板区域未正确跨越

Question

当我尝试使用网格区域时，它们没有跨越适当数量的列。然而，grid-template-columns 属性工作正常，它显示得好像我根本没有使用网格区域。

scss:

.mygrid {
  display: grid;
  padding: 3%;
  grid-template-columns: 1fr;
  grid-template-areas: "a7" "a5" "a10" "a15" "a20";
  grid-gap: 0.4em;
  @media (min-width: 400px) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a7 a7"
      "a5 a10"
      "a15 a20";
  }
  @media (min-width: 600px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "a7 a7 a7 a7"
      "a5 a10 a15 a20";
  }
  .box {
    display: inline;
    padding: 1em;
    box-sizing: border-box;
  }
  .a7 {
    grid-area: a7;
  }
  .a5 {
    grid-area: a5;
  }
  .a10 {
    grid-area: a10;
  }
  .a15 {
    grid-area: a15;
  }
  .a20 {
    grid-area: a20;
  }
}

html:

<div class="mygrid">
    <div id="7" class="box a7">
      <span>7</span>
    </div>

    <div id="5" class="box a5">
      <span>5</span>
    </div>

    <div id="10" class="box a10">
     <span>10</span>
    </div>

    <div id="15" class="box a15">
      <span>15</span>
    </div>

    <div id="20" class="box a20">
      <span>20</span>
    </div>
</div>

我不确定是什么导致了这个问题，我的代码看起来是正确的

尽管在我的项目中尝试了@vals 答案，但我仍然收到同样的问题。有没有什么众所周知的东西可以级联并导致它崩溃？

我还验证了我的 html 以确保没有导致此问题的错误。

Answer 1

将标识符更改为非数字：

.mygrid {
  display: grid;
  padding: 3%;
  grid-template-columns: 1fr;
  grid-template-areas: "a7" "a5" "a10" "a15" "a20";
  grid-gap: 0.4em;
}

@media (min-width: 400px) {
  .mygrid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a7 a7" "a5 a10" "a15 a20";
  }
}

@media (min-width: 600px) {
  .mygrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a7 a7 a7 a7" "a5 a10 a15 a20";
  }
}

.box {
  display: inline;
  padding: 1em;
  box-sizing: border-box;
}

.b7 {
  grid-area: a7;
  background-color: yellow;
}

.b5 {
  grid-area: a5;
}

.b10 {
  grid-area: a10;
}

.b15 {
  grid-area: a15;
}

.b20 {
  grid-area: a20;
}

<div class="mygrid">
  <div id="7" class="box b7">
    <span>7</span>
  </div>

  <div id="5" class="box b5">
    <span>5</span>
  </div>

  <div id="10" class="box b10">
    <span>10</span>
  </div>

  <div id="15" class="box b15">
    <span>15</span>
  </div>

  <div id="20" class="box b20">
    <span>20</span>
  </div>
</div>