CSS3-网格模板区域没有正确生成

Question

当我尝试使用网格区域时，它们没有跨越适当数量的列。但是，轴网模板列属性运行良好，显示时就好像我根本没有使用轴网区域一样。

scs:

.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>