Welcome back.
Now that we've gotten used to the CSFs grid system, let's introduce a few more properties.
Now, another thing we can do with CSFs.
Great, because remember, I said it was two dimensional.
That is, we can control the rose as well.
So far, this is something that Xbox can do as well.
We can do something like grid template rows now and actually define the way the rows should as well.
So let's say I want to do one far too far.
What do you think will happen?
Let's see.
Going to save and refresh.
The first row has is one F.R., but the second row is twice as big as the first one as we can see here,
and because of the way it works in the third row, because we haven't really added a third column automatically
if there's more items.
It's going to just start repeating, so the next row, which is the third row, will have one F.R. So
I can define different things here.
I can say three, four for the third row and let's say five F.R. for the last row, if I refresh and
safe here.
If I save and refresh your.
We see that we have our new columns or rose.
But that looks ugly, so let's just keep it at one half hour, which is the default.
Now, another thing that we can do and that you'll see a lot of is.
The repeat function that we can add to something like grid template columns.
So instead of doing this over here, I can say repeat.
Brackets and now I say, how many times I want to repeat something, so the first number is how many
times?
So let's say three times repeat one F r.
So that's like saying one four one four one four, three times.
If I save this and refresh.
I get one, two, three, if I do four here and I refresh, I get four and you can imagine what happens
if we do six, we just keep repeating things.
Another thing that we can do is the auto property and the auto property just simply means.
Fill in whatever available space we have.
So if I do something like auto one far too far and I refresh here, you'll notice that.
The first column doesn't really have any spaces outside of the emoji and auto can also be thought of
as the max size of the content.
If I make this fox, let's say, have a content of two and I refresh.
You'll see that the auto property automatically resized to fit the content, and because this entire
layout is on a grid system, it will make sure that the ones below it will have the same size.
If I do one favor here and I refresh.
You'll see the difference of what we're talking about.
It's not automatically scaling this first grid.
Instead, it's going to keep the proportions that we have and extend anything below it that doesn't
fit.
So Otto is another really, really good feature to use.
All right, let's tackle a few more properties in the next video.