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

by

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>

More Related Contents:

  1. Why aren’t my grid-template-areas with ASCII art not working?
  2. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  3. Aligning grid items across the entire row/column (like flex items can)
  4. Equal height rows in CSS Grid Layout
  5. Browser support for CSS Grid
  6. The difference between percentage and fr units
  7. Why are CSS named grid areas not in quotes?
  8. What is the difference between auto-fill and auto-fit?
  9. What is difference between justify-self, justify-items and justify-content in CSS grid?
  10. How to make the items in the last row consume remaining space in CSS Grid?
  11. A grid layout with responsive squares
  12. Why percentage value within grid-gap create overflow in CSS grid?
  13. How can I make a div span multiple rows and columns in a grid?
  14. What is the difference between align-items vs. align-content in Grid Layout?
  15. Equal height of elements inside grid item with CSS grid layout
  16. How to make a column span full width when a second column is not there? (CSS Grid)
  17. Can I have a varying number of columns per row in a CSS grid?
  18. Why does a grid-area name absent in grid-template-areas create additional tracks?
  19. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  20. Percentage padding / margin on grid item ignored in Firefox
  21. CSS Grid auto fit with max-content
  22. Can flex items wrap in a container with dynamic height?
  23. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  24. Is a button allowed to have display:grid? [duplicate]
  25. How is “grid-template-rows: auto auto 1fr auto” interpreted?
  26. How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
  27. minmax fails (invalid property value)
  28. How to center content and make the background cover the full column when using CSS Grid?
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment