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!

相关标签:

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>