CSS grid-template-areas Property
CSS grid-template-areas Property
CSS grid-template-areas property defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerdiv{
display: grid;
border: 1px solid black;
grid-template-areas: 'myArea myArea .';
}
#outerDiv div{
border: 1px solid #00f;
background-color: rgba(0,0,255,.2);
padding: 25px;
margin: 8px;
text-align: center;
}
#outerDiv div:nth-child(1){
grid-area: myArea;
}
</style>
</head>
<body>
<h1>CSS grid-template-areas Property</h1>
<div id="outerDiv">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div>Div 7</div>
</div>
</body>
</html>
Syntax
Using CSS
element{
grid-template-areas: 'myArea myArea .';
}
Using Javascript
object.style.gridTemplateAreas="'myArea myArea .'";
Animatable
Yes, grid-template-areas property is animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS grid-template-areas property is none.
Property Value
The following table provides a list of values for CSS grid-template-areas property.
| Value | Explanation |
|---|
| none | The grid container doesn't define any named grid areas. |
| string | A sequence that specifies how each columns and row should display. |
Using JavaScript
In the following example, we will demonstrate how to change the CSS grid-template-areas property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
#outerdiv{
display: grid;
border: 1px solid black;
grid-template-areas: 'myArea . .';
}
#outerDiv div{
border: 1px solid #00f;
background-color: rgba(0,0,255,.2);
padding: 25px;
margin: 8px;
text-align: center;
}
#outerDiv div:nth-child(1){
grid-area: myArea;
}
</style>
</head>
<body>
<h1>CSS grid-template-areas Property</h1>
<div id="outerDiv">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div>Div 7</div>
</div>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("outerDiv");
function myFunction(){
x.style.gridTemplateAreas = "'myArea myArea myArea'";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
