justify-content property aligns the grid items along the row or X-axis.
Let's look at some examples for justify-content
property with all possible
values:
justify-content: start aligns the grid with the start edge of the grid
container.
justify-content: end aligns the grid with the end edge of the grid
container.
justify-content: center aligns the grid to the center of the grid container.
justify-content: space-around places equal amount of space between each grid
item and half of that spaces at the ends.
justify-content: space-between places equal amount of space between each
grid item, with no space at the ends.
justify-content: space-evenly places equal amount of space between each grid
item, including the ends.