The grid-template-areas CSS property 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 onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">none</button>
<button onmouseover="myfunction(value)" 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)
{
document.querySelector(".myclass").style.gridTemplateAreas = myparameter;
}
</script>
</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)
{
document.querySelector(".myclass").style.gridTemplateAreas = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>