Jobs Hub

CSS grid-row-end

The CSS grid-row-end property is used to span a grid item for specified number of rows. Or to define the ending row position of a grid item in grid layout. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; grid-template-columns: auto auto;}
      div.container > div {border: 1px solid crimson; padding: 10px; text-align: center;}
      #myDiv {grid-row-end: span 4;}
   </style>
</head>
<body>

   <div class="container">
      <div id="myDiv">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

CSS grid-row-end Syntax

The syntax of grid-row-end property in CSS, is:

grid-row-end: auto|span n|rowLineNumber;

The auto is the default value of grid-row-end property.

The rowLineNumber as value, is used when we need to place a grid item before the given rowLineNumber. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; grid-template-columns: auto auto;}
      div.container > div {border: 1px solid crimson; padding: 10px; text-align: center;}
      #myDiv {grid-row-end: 4;}
   </style>
</head>
<body>

   <div class="container">
      <div id="myDiv">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G

See the grid item whose id is myDiv gets moved to the 3rd row, before the stopping row position provided, that is 4th row.

Note - To span a grid item for some particular number of rows, use span n as value to define the grid-row-end property. Whereas to move a grid item to some particular location (row), use rowLineNumber as value to define the same property.

CSS Online Test

« Previous Tutorial Next Tutorial »