Understanding grid-row in CSS

In CSS, the grid-row property is used to specify the location of a grid item within a CSS grid container along the vertical axis. It allows you to define the grid item's starting and ending rows on the grid.

The grid-row property can accept several different values, including:

<number>: Specifies the grid row number that the grid item starts at.
span <number>: Specifies the number of rows that the grid item will span.
<name>: Specifies a named grid line to start or end the grid item at.
span <name>: Specifies the number of rows that the grid item will span using named grid lines.

Here's an example:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="grid-item box-1">Box-1</div>
    <div class="grid-item box-2">Box-2</div>
    <div class="grid-item box-3">Box-3</div>
    <div class="grid-item box-4">Box-4</div>
    <div class="grid-item box-5">Box-5</div>
    <div class="grid-item box-6">Box-6</div>
    <div class="grid-item box-7">Box-7</div>
    <div class="grid-item box-8">Box-8</div>
    <div class="grid-item box-9">Box-9</div>
  </div>
</body>
</html>

style.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
}

.container{
  border:5px solid black;
  margin: 20px;
}

.grid-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/**-----------------------------------------------*/

.container{
  display: grid;
  grid-template: repeat(3,200px)/ repeat(3,200px);
}
  

.box-1{
  grid-column: 1 / span 2;

  grid-row-start: 1;
  grid-row-end: 3;
  grid-row-end: span 2;

  grid-row: 1 / span 3;
}

The code you provided creates a CSS grid layout with three rows and three columns, where each row and column has a fixed size of 200px using the grid-template shorthand property.

The grid-column property sets the starting and ending column positions for the element. In the .box-1 selector, the grid-column property is set to 1 / span 2, which means that the box will start at the first column and span 2 columns, occupying both the first and second columns of the grid.

The grid-row-start and grid-row-end properties set the starting and ending row positions for the element. In the .box-1 selector, grid-row-start is set to 1, which means the box will start in the first row of the grid. The grid-row-end property is first set to 3, which means that the box will end in the third row of the grid. However, this is then overridden by the grid-row-end property set to span 2, which means that the box will span 2 rows, ending in the third row of the grid.

Lastly, the grid-row property is set to 1 / span 3, which means that the box will start at the first row and span three rows, occupying the entire first column of the grid.

Overall, the .box-1 element is positioned in the first column of the grid, starting at the first row and spanning three rows vertically, as well as spanning two columns horizontally.