CSS grid-row property
The grid-row property in CSS is a shorthand property that is known for specifying the size and location of a grid item inside a grid row by contributing a span, or a line or automatic (nothing) to its grid placement.
In case, two grid-line values are specified, then the grid-row-start longhand is set to the value before the slash. The grid-row property can be specified as any of these, grid-row-end or grid-row-start.
Syntax for the grid-row-start property in CSS
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;
/* <custom-ident> values */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;
/* <integer> + <custom-ident> values */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;
/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;
/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: unset;
Example: CSS grid-row Property
In the example below, we are using the grid-row property with different border styles, colors, and different values.
In this case, we have given the grid-row property as 2/4 and 7.
<!DOCTYPE html>
<html>
<head>
<title>The grid-row property in CSS</title>
<style type="text/css">
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(6, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: red;
grid-row: 2 / 4;
}
#item3 {
background-color: blue;
grid-row: span 2 / 7;
}
</style>
</head>
<body>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
Output
Another example of the grid-row property in CSS
Here in the example below, we are using the grid-row property with different border styles, colors and their different values. In this case, we have given the grid-row property as somegridarea span.
<!DOCTYPE html>
<html>
<head>
<title>The grid-row property in CSS</title>
<style type="text/css">
#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(6, 1fr);
}
#item1 {
background-color: lime;
}
#item2 {
background-color: red;
grid-row: 5 somegridarea span / 2 span;
}
#item3 {
background-color: blue;
grid-row: 5 somegridarea span / 2 span;
}
</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 grid-row property 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 the constituent properties of the grid-row property is is the as specified one. The animation type for this property is 'discrete'.
