grid-area does not seem to work with the attr function, is this by design?

Question

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>

Having to repeat those redundant grid-area declarations is a pain though. Perhaps I can use the same trick there?

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>

Nope!

I've tried variations with doing a data attribute or including the unit type and still nothing. So what's going on here. Does attr not work with grid areas by design or is this a bug?

Tested in chrome, firefox, and safari latest on OsX. all to the same effect.

Answer 1

Yes it's by design as attr() is acutally only suppored with content. As defined in the current specification it's a value for content.

You can also read in MDN:

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

So it may work with other properties but this is still in draft mode

---

An alternative is to consider CSS variables where you will almost have the same thing to write but it will not work with content because it's not a string. For the content you can replace this with counters:

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";
    
  counter-reset:g;
}

div {
  display: flex;
  grid-area: var(--c);
  outline: 1px dotted green;
}
div:before {
  margin: auto;
  counter-increment: g;
  content: "a" counter(g);
}

<section>
	<div style="--c:a1"></div>
	<div style="--c:a2"></div>
	<div style="--c:a3"></div>
	<div style="--c:a4"></div>
	<div style="--c:a5"></div>
	<div style="--c:a6"></div>
	<div style="--c:a7"></div>
	<div style="--c:a8"></div>
	<div style="--c:a9"></div>
	<div style="--c:a0"></div>
</section>