Next up, let's learn about justify content, so sometimes the total size of your grid might be less
than the size of the grid container.
This could happen if all of your great items are sized with non flexible units like pixels, for example.
In this case, in this case, you can set the alignment of the grid within the grid container and this
property will align the grid along the inland road access as opposed to allowing content which aligns
the grid along the block column axis.
So let's take a look at this now for some of type in a comment.
Of justify content.
And let's get started by let's take a to go so great container.
I'm going to comment this out.
Now, first, we will displayed as grid.
And now we're tapping gratingly column repeat and as I said, we need to have non flexible.
Units, so instead of typing in one eye far or percentages, we will have 150 pixels.
OK, so let's take a look.
We have here our entire container, so the black background and we also have our items.
And you can see they're not stretching to the edge of the container because each of them has only 150
pixels.
Now, let's just apply the content with start.
Which will align the grid to the flush with the start edge of the container and that it's safe.
Yep, I did.
OK, now let's try and let me scroll down a bit to justify content and.
And this will push me to the edge of the great container, OK?
Next stop will have center justified content.
And center, and there we go.
He is now in the center of the container.
And, of course, Stretch.
Now, start stretch like this will stretch out our items.
Up next, we have a few things you didn't see until now, and that will be space around space between
a space even.
So let's, first of all, justify the content with space around now.
This will place an even amount of space between each grid item with the half sized space on the far
ends.
So let's see how this looks.
And I say the click save.
Yeah, there it is.
So this puts space around the elements evenly between the elements and evenly to the edges.
Next up, we have space.
Between which would place even amount of space between each item with no space at the far end of the
containers, let it save.
And you can see we have no space at the far edges, but only equal spaces between the items.
And last but not least, we have just content with space evenly.
Not this one will place an even amount of space between each grid item, including the far ends of the
container.
I can see the spaces not only between the items, but also between the edges are equal.
OK, so this basically it would justify content.