The following works:
Note how I'm even using content: attr(class)
to avoid having to type out the labels. Neat!
section {
outline: 1px solid red;
display: grid;
grid-gap: 10px;
grid-template-areas:
"a1 a1 a1 a1"
"a2 a2 a3 a3"
"a2 a2 a4 a5"
"a6 a6 a6 a6"
"a7 a8 a9 a9"
"a7 a0 a0 a0";
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
.a5 { grid-area: a5; }
.a6 { grid-area: a6; }
.a7 { grid-area: a7; }
.a8 { grid-area: a8; }
.a9 { grid-area: a9; }
.a0 { grid-area: a0; }
div {
display: flex;
outline: 1px dotted green;
}
div:before {
margin: auto;
content: attr(class);
}
<section>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a0"></div>
</section>
See Question&Answers more detail:os