Another property that is very important when it comes to CSFs grid is justify.
And justify items and the default is right now stretch.
So that if I refresh this, nothing's going to change, but if I do start.
And refresh it aligns the contents in a great item along what we call the Roe axis.
So the Roe axis is each Roe.
I do.
And and I refresh.
We see that they're now towards the end.
But a better way to visualize this is to actually use our developer tools, so if I go to view developer
developer tools and we select our grid.
You see that by clicking on this pointy icon and hovering over it in Google Chrome, we actually see
our grid system and if I scroll, you see that it actually stays in place.
But you see that we now have our items at the end of our grid system, our last item, which is too
far right over here, is justified to the end, our second column.
Is justified to the end when we see a bit of a gap here, and that is because remember, we have a one
F.R. and then the first item because it's auto and the size is according to its content, doesn't really
move whether we have and or start here.
It's already within the maxed space of the grid system.
And just like we have the axis around the row, if I change this to a line items.
And I save and refresh.
This one's hard to see, so let's just do five or three hundred pixels and refresher.
We see that a line item is the exact opposite, where it's around a column axis.
And we can use start end here to move those red boxes around.
But most of the time, we want this filled and we don't want to move items around, so I don't really
like using those two properties.
So let's fix that to one of our.
If I refresh, all right, we have things back to normal.
I'm going to close this.
Now, the last thing I want to show you inside of this container is my preferred method of actually
creating a grid layout and any website that I built.
And what I usually like to do is something new that we haven't seen before.
I usually do repeat and define here how many rows I want.
Let's say I want three at one F.R. So I want everything to have the same size.
But there's a problem here, right?
Because right now this is stretching.
But as soon as we make it too small or too big, it's just it's not extremely responsive or it's not
100 percent responsive.
So instead, I like using auto fill.
And in Autofill, just to show you what it does, if I do something like three hundred pixels and I
refresh.
And now I change the sizing, you'll see that our grid system or the column system adjusts audiophiles
according to the size of our viewport, which is really, really nice.
But right now, I just said three hundred pixels.
So, again, it's not super, super responsive.
So instead, we can use something else called the men Max.
And I know this can look confusing, but if you remember this pattern, this is the most common pattern,
I would say, to use when it comes to Scribd.
So once you get used to this, you can just copy and paste it and use it everywhere.
And here what we want to do is say, well, the minimum that we want the size of our columns to be,
let's say I want the minimum to be two hundred pixels.
So that's the smallest.
That's going to get the max, though.
How big do we want these to get?
And this is a common thing.
What do we want as the biggest.
Well, just one F r.
Because as we all see, by doing this, you'll automatically adjust to the size of the viewport.
Let me just save and show you what I mean by refresh here.
I see I have three here.
It auto adjusts, auto adjust based on our size.
But you also see that the container itself is also adjusting in size so that if I go smaller and smaller
and smaller.
As soon as we hit the 200 pixel minimum.
It adjusts and because we said one as far as the max.
As soon as the viewport is really, really small and goes below 200 pixels.
It's going to just take up one fraction, and in our case, it will be the entire screen.
So using this syntax of repeat autofill min max, giving it a minimum, we're able to make this completely
responsive.
And as you can see here, it's pretty powerful, right?
In just a few lines of code, we've made this grid system that is completely responsive.
All right, up to this point, we've just focused on the container, but what about the individual items?
What if we want something that's maybe bigger than the other item and we don't want them all symmetrical
like this?
What would we do?
Let's find out in the next video.