Grid

grid-row

Work based on Grid Lines

grid-row-start and grid-row-end

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

.box-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template: repeat(3, 200px) / repeat(3, 200px);
}

.box-1 {
  grid-column: 1 / span 2;    // added
  grid-row-start: 1;
  grid-row-end: 3;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

Using span keyword to define box without grid lines

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

.box-1 {
  grid-column: 1 / span 2;    // added
  grid-row-start: 1;
  grid-row-end: span 2;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-row

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

.box-1 {
  grid-column: 1 / span 2;    // added
  grid-row: 1 / span 2;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template: repeat(3, 200px) / repeat(3, 200px);
}

.box-1 {
  grid-column: 1 / span 2;    // added
  grid-row: 1 / span 3;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9