Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS grid-row-end Property

The grid-row-end property in CSS is a shorthand property that is known for specifying the end position of a grid item inside a grid row by contributing a span, or a line or automatic (nothing) to its grid placement, and hence, specifying the inline-end edge of the grid area.

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

<grid-line>

where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

Example: CSS grid-row-end Property

In the example below, we are using the grid-row-end property with different border styles, colors, and different values. In this case, we have given the grid-row-end property as 3 and 5.

<!DOCTYPE html>
<html>

<head>
	<title>The grid-row-end property in CSS</title>
	<style type="text/css">
		.wrapper {
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  grid-auto-rows: 100px;
		  background-color: pink;
		  border: 2px solid green;
		}
		
		.box1 {
		  grid-column-start: 1;
		  grid-column-end: 4;
		  grid-row-start: 1;
		  grid-row-end: 3;
		  background-color: red;
		  border: 2px solid blue;
		}
		
		.box2 {
		  grid-column-start: 1;
		  grid-row-start: 3;
		  grid-row-end: 5;
		}
	</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-end Property

In the example below, we are using the grid-row-end property with different border styles, colors, and different values. In this case, we have given the grid-row-end property as a span somegridarea.

<!DOCTYPE html>
<html>

<head>
	<title>The grid-row-end property in CSS</title>
	<style type="text/css">
		.wrapper {
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  grid-auto-rows: 100px;
		  background-color: pink;
		  border: 2px solid green;
		}
		
		.box1 {
		  grid-column-start: 1;
		  grid-column-end: 4;
		  grid-row-start: 1;
		  grid-row-end: span somegridarea;
		  background-color: red;
		  border: 2px solid blue;
		}
		
		.box2 {
		  grid-column-start: 1;
		  grid-row-start: 3;
		  grid-row-end: span somegridarea;
		}
	</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-end 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.