The grid-template-areas property for CSS specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties.
grid-template-areas: value; object.style.gridTemplateAreas = "value"; <'grid-template-areas'> = none | <string>+ none Indicates that no named grid areas, and likewise no explicit grid tracks, are defined by this property (though explicit grid tracks could still be created by grid-template-columns or grid-template-rows).
<string> Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: grid;
grid-template-areas: "a b c" "d e f" "g h i";
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<div class="myclass">
<div>string</div>
<div>string</div>
<div>string</div>
<div>string</div>
<div>string</div>
<div>string</div>
<div>string</div>
<div>string</div>
<div>string</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: grid;
}
.myclass > div
{
background-image: linear-gradient(135deg, white, lightgray);
}
</style>
</head>
<body>
<button>initial</button>
<button>none</button>
<button value="'a b c' 'd e f' 'g h i'">string</button>
<div class="myclass">
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
<div>grid-template-areas</div>
</div>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector(".myclass").style.gridTemplateAreas = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>