Grid

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

align-self: stretch (default)

CSS
.container {
  display: grid;
}

.box-1 {
  align-self: stretch;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

align-self: start

CSS
.container {
  display: grid;
}

.box-1 {
  align-self: start;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

align-self: end

CSS
.container {
  display: grid;
}

.box-1 {
  align-self: end;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

align-self: center

CSS
.container {
  display: grid;
}

.box-1 {
  align-self: center;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
}

.box-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  align-self: center;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
}

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