CSS Grid-area Property
The grid-area property in CSS is a shorthand property known to specify the size and location of an item inside a grid with the help of a line, span, or automatic to the grid placement, ultimately specifying the edges of the grid area. The constituent properties for this property are- grid-column-start, grid-row-start, grid-row-end, and grid-column-end.
Syntax
<grid-line> [ / <grid-line> ]{0,3}
where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
Example: CSS grid-area Property
in the example below, we are using the grid-area property with different border styles, colors and their different values. In this case, we have given the grid-area property as auto span 3.
The CSS styling is done inside the opening and closing head tags of the HTML.
The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>The grid-area property in CSS</title>
<style type="text/css">
#grid {
display: grid;
height: 100px;
grid-template: repeat(4, 1fr) / 50px 100px;
}
#item1 {
background-color: skyblue;
grid-area: 2 / 2 / auto / span 3;
}
#item2 {
background-color: deeppink;
}
#item3 {
background-color: red;
}
</style>
</head>
<body>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
Output
Example: CSS grid-area Property
In the example below, we are using the grid-area property with different border styles, colors and their different values. In this case, we have given the grid-area property as span 3 span some grid area.
The CSS styling is done inside the opening and closing head tags of the HTML.
The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>The grid-area property in CSS</title>
<style type="text/css">
#grid {
display: grid;
height: 100px;
grid-template: repeat(4, 1fr) / 50px 100px;
}
#item1 {
background-color: skyblue;
grid-area: some-grid-area;
}
#item2 {
background-color: deeppink;
grid-area: span 3 / span some-grid-area;
}
#item3 {
background-color: red;
grid-area: span 3 / span some-grid-area;
}
</style>
</head>
<body>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
Output
Live example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
57 |
57 |
| Edge |
16 |
16 |
| Firefox |
52 |
52 |
| Internet Explorer |
no |
no |
| Opera |
44 |
44 |
| Safari |
10.1 |
10.1 |
| Webview Android |
57 |
57 |
| Chrome Android |
57 |
57 |
| Firefox Android |
52 |
52 |
| Opera Android |
43 |
43 |
| IOS Safari |
10.3 |
10.3 |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the constituent properties of the grid-area property in CSS is 'auto'. This property is applicable to the grid items and the absolutely positioned boxes whose containing block is a grid container. It is not an inherited property. The computed value for this property is the as specified one.
