CSS | grid-area Property
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
Please Login to comment...