CSS grid-row-start Property
The grid-row-start property in CSS is known for specifying the start position of a grid item in the grid column by contributing a span, or a line to its grid placement and hence, specifies the block-start edge of the grid area of the item.
This property may be specified as a single grid-line value like- a custom-ident value or 'auto' keyword, an integer value, both the custom-ident and integer values separated by a space or the 'span' keyword with either an integer or a custom ident or both values.
Syntax
<grid-line>
where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
Example 1: CSS grid-row-start Property
Here in the example below, we are using the grid-row-start property with different border styles, colors and their different values. In this case, we have given the grid-row-start property as somegridarea 4.
<!DOCTYPE html>
<html>
<head>
<title>The grid-row-start property in CSS</title>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
background-color: deeppink;
border: 4px solid blue;
}
.box1 {
grid-column-start: span somegridarea 5;
grid-column-end: 4;
grid-row-start: somegridarea 4;
grid-row-end: 3;
background-color: orange;
border: 4px solid red;
}
.box2 {
grid-column-start: span somegridarea 5;
grid-row-start: somegridarea 4;
grid-row-end: 5;
background-color: purple;
border: 4px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>
</body>
</html>
Output
Example 2: CSS grid-row-start Property
Here in the example below, we are using the grid-row-start property with different border styles, colors and their different values. In this case, we have given the grid-row-start property as span 3.
<!DOCTYPE html>
<html>
<head>
<title>The grid-row-start property in CSS</title>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
background-color: green;
border: 4px solid blue;
}
.box1 {
grid-row-start: span 3;
grid-column-end: 4;
grid-row-end: 3;
background-color: pink;
border: 4px solid red;
}
.box2 {
grid-row-start: span 3;
grid-row-end: 5;
background-color: purple;
border: 4px solid red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</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-start property in CSS is 'auto'. This property is applicable to the grid items and to the absolutely positioned boxes where containing block is a grid container. It is not an inherited property. The computed value for this property is the as specified one.
