FIG. 1: justify-items: start and align-items: start

Item 1
Item 2
Item 3
Item 4

FIG. 2: justify-items: end and align-items: end

Item 1
Item 2
Item 3
Item 4

FIG. 3: justify-items: center and align-items: center

Item 1
Item 2
Item 3
Item 4

FIG. 4: justify-items: baseline and align-items: baseline

Item 1
Item 2
Item 3
Item 4

FIG. 5: justify-items: stretch and align-items: stretch

Item 1
Item 2
Item 3
Item 4

FIG. 6: justify-items: center and align-items: end

Item 1
Item 2
Item 3
Item 4

FIG. 7: Using justify-self and align-self to adjust a single element

Item 1
Item 2
Item 3
Item 4

FIG. 8: Using justify-content: start and align-content: start to align the grid

Item 1
Item 2
Item 3
Item 4

FIG. 9: Using justify-content: end and align-content: end to align the grid

Item 1
Item 2
Item 3
Item 4

FIG. 10: Using justify-content: center and align-content: center to align the grid

Item 1
Item 2
Item 3
Item 4

FIG. 11: Using justify-content: space-between and align-content: space-between to align the grid

Item 1
Item 2
Item 3
Item 4

FIG. 12: Using justify-content: space-around and align-content: space-around to align the grid

Item 1
Item 2
Item 3
Item 4

FIG. 13: Using justify-content: space-evenly and align-content: space-evenly to align the grid

Item 1
Item 2
Item 3
Item 4