Grid

justify-content => Horizontal Axis Align
align-content => Vertical Axis Align

justify-content: start (default)

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

justify-content: center

CSS
.container {
  display: grid;
  height: 800px;
  grid-template: repeat(3, 200px) / repeat(3, 200px);
  justify-content: center;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

justify-content: end

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

justify-content: space-between

CSS
.container {
  display: grid;
  height: 800px;
  grid-template: repeat(3, 200px) / repeat(3, 200px);
  justify-content: space-between;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

justify-content: space-around

CSS
.container {
  display: grid;
  height: 800px;
  grid-template: repeat(3, 200px) / repeat(3, 200px);
  justify-content: space-around;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

justify-content: space-evenly

CSS
.container {
  display: grid;
  height: 800px;
  grid-template: repeat(3, 200px) / repeat(3, 200px);
  justify-content: space-evenly;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9