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:
- 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.
Example 1:
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:
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
Last Updated :
02 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...