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>