CSS grid-area Property
Last Updated :
24 Apr, 2024
The grid-area property is used to set a grid item size and location in a grid layout. The grid-area property is also used to set a name to a grid item.Â
Syntax:
grid-area: grid-row-start | grid-column-start | grid-row-end | grid-column-end | itemname;
Property Values:
Property Value
| Description
|
|---|
grid-row-start
| It sets the row on which the item is displayed first.
|
grid-column-start
| It sets the column on which the item is displayed first.
|
grid-row-end
| It specifies the row-line to stop displaying the item, or span how many rows.
|
grid-column-end
| It sets the number of columns to span.
|
itemname
| It sets a name for the grid item.
|
Different Examples of CSS Grid Area Property
Example 1:Â This example shows the usage of CSS grid area property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | grid-area Property
</title>
<style>
.item {
grid-area: Area;
}
.grid-container {
display: grid;
grid-template-areas: 'Area Area Area';
grid-gap: 30px;
background-color: green;
padding: 20px;
}
.GFG {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>The grid-area Property</h2>
<div class = "grid-container">
<div class = "GFG item">1</div>
<div class = "GFG">2</div>
<div class = "GFG">3</div>
<div class = "GFG">4</div>
<div class = "GFG">5</div>
<div class = "GFG">6</div>
</div>
</body>
</html>
Output:
 
Â
Example 2:Â This example shows the usage of CSS grid area property.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-area property
</title>
<style>
.GFG1 {
grid-area: heading;
}
.GFG2 {
grid-area: margin;
}
.GFG3 {
grid-area: subtitle1;
}
.GFG4 {
grid-area: info;
}
.main {
display: grid;
grid-gap: 30px;
background-color: green;
padding: 20px;
grid-template-areas:
'margin heading heading heading heading heading '
'margin subtitle1 info info info info';
}
.GFG {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS grid-area Property</h2>
<div class = "main">
<div class = "GFG GFG1">Heading</div>
<div class = "GFG GFG2">Margin</div>
<div class = "GFG GFG3">Subtitle</div>
<div class = "GFG GFG4">info</div>
</div>
</body>
</html>
Output:
 
Â
Supported Browsers: The browsers supported by grid-area property are listed below:
- Google Chrome 57.0
- Edge 16.0
- Mozilla Firefox 52.0
- Safari 10.1
- Opera 44.0
Share your thoughts in the comments
Please Login to comment...