The following examples showcase the functionality:
It's impressive how I'm utilizing content: attr(class) to streamline the labeling process. Impressive!
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>Although, repeating the cumbersome grid-area declarations is quite tedious. Is there a way to simplify this?
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";
}
div {
display: flex;
grid-area: attr(class);
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>Unfortunately, it doesn't work!
I've experimented with various approaches such as using data attributes or adding unit types, but no success. Could this be due to attr not being compatible with grid areas intentionally, or is it a glitch?
Tested on Chrome, Firefox, and Safari latest versions on OSX, producing the same outcome.