The grid-template-areas property in CSS is used to specify the area within the grid layout. The named grid area can be rendered on the screen based on the sequence of values of the grid-template-areas property.
Syntax:
grid-template-areas: none|itemnames;
Property Values:
- none: It is the default value and it does not contain grid-named areas.
- itemnames: It is the sequence of grid area names in the form of rows and columns.
Note:
- Each area name is separated by a space.
- Each row is contained within single quote ‘ ‘.
- There is a semicolon at the end of the declaration only.
- Period represents items with no names.
Example 1: This example displays the grid-template-areas property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-template-areas Property
</title>
<style>
.GFG1 {
grid-area: area;
}
.geeks {
background-color: green;
padding: 30px;
display: grid;
grid-template-areas: 'area area';
grid-gap: 20px;
}
.GFG {
background-color: white;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="geeks">
<div class="GFG GFG1">A</div>
<div class="GFG">B</div>
<div class="GFG">C</div>
<div class="GFG">D</div>
<div class="GFG">E</div>
<div class="GFG">F</div>
<div class="GFG">G</div>
<div class="GFG">H</div>
</div>
</body>
</html>
|
Output: 
Example 2: This example displays the grid-template-areas property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-template-areas Property
</title>
<style>
.GFG1 {
grid-area: area;
}
.geeks {
background-color: green;
padding: 30px;
display: grid;
grid-template-areas:
'area area . . .'
'area area . . .';
grid-gap: 20px;
}
.GFG {
background-color: white;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="geeks">
<div class="GFG GFG1">A</div>
<div class="GFG">B</div>
<div class="GFG">C</div>
<div class="GFG">D</div>
<div class="GFG">E</div>
<div class="GFG">F</div>
<div class="GFG">G</div>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by grid-template-areas property are listed below:
- Google Chrome 57.0
- Edge 16.0
- Firefox 52.0
- Safari 10.1
- Opera 44.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!