justify-items => Horizontal Axis Align
align-items => Vertical Axis Align
justify-items: stretch (default)
CSS
.container {
display: grid;
height: 600px;
grid-template-columns: repeat(3, 1fr);
justify-items: stretch;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
justify-items: start
CSS
.container {
display: grid;
height: 600px;
grid-template-columns: repeat(3, 1fr);
justify-items: start;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
justify-items: center
CSS
.container {
display: grid;
height: 600px;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
justify-items: end
CSS
.container {
display: grid;
height: 600px;
grid-template-columns: repeat(3, 1fr);
justify-items: end;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9