Grid

grid-column

Work based on Grid Lines

grid-column-start and grid-column-end

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

.box-1 {
  grid-column-start: 1;
  grid-column-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-start: 1;
  grid-column-end: 4;
}
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-start: 1;
  grid-column-end: 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-start: 1;
  grid-column-end: span 3;

}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

grid-column

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

.box-1 {
  grid-column: 1 / 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;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9