Welcome back.
I've given you some starter files, so I recommend watching these videos, as you quote along as well
on your computer.
We have a few animal carts here that are extremely cute.
Obviously, right now.
If we look at what we have, we have an HTML page with just simple devs that contain these little images
of animals.
And if we go to the style tab of prefilled, a few things for you just so things look good.
But all we're really doing here is we have a few colors and we've added gradients here just so it looks
a little bit nicer.
And we have the zones, which are these individual cards with some predefined excess properties that
we've already seen in the previous videos.
Just with this base success that we have, we see that we have some really nice looking cards.
And right now we're using display in line block.
If I change this to display block and I say this, let's refresh.
We see that we now have blocks.
That's great.
But we want a little bit more control and perhaps make this grid a little bit more responsive, maybe
look a little bit different and just overall cleaner and when it comes to grids, success grade as a
way to go.
So how do we use it?
Well, the first thing we need to do is to have a container.
Around these items.
So I'm just going to create a new div and give it a class.
Of container, we can name it whatever we want, but container is a nice.
Descriptive class name, and we wrap all the items in this container now, the way it works is very
similar to flex box.
That is, we give it the property of display grid and all the children will now be able to be part of
this grid system.
So let's see what that looks like.
I'm going to have the container.
Class and this container class will have display.
Grid, so remember, with flex box, we can do flex at similar to that we do display grid and we no
longer want to use the display block of the zones because we're going to have a grid system.
So I'm just going to comment this out for now.
We've just declared this as a grid system, but we actually need to tell her what to do now.
And the most important part of the grid is this property grid template columns.
And most likely, you're going to be using this and all your grid implementation.
And what we can use this grid template columns is to tell our page how many columns we want to use in
here, if I say something like three hundred pixels.
And three hundred pixels, I save and refresh your.
Look at that, I have three hundred pixels and then three hundred pixels and automatically it because
I've declared it this way with two definitions or two values, it assumes that we have two grids, two
grids of three hundred pixels and three hundred pixels.
So if I make this larger or smaller, it's always going to have three hundred pixels, two columns.
If I add, let's say, another three hundred pixels here and safe refresh, look at that.
We now have three columns, very, very nice.
Another one that you'll see a lot of is the grid gap.
And as you might guess from the name, it tells us how much gap we want between the grids.
So if I do 20 pixels here and I refresh.
I see that we get 20 pixels of gap now this looks really good right now, but if I change things around,
this isn't really responsive because each column is three hundred pixels wide.
And as we know, users have different display sizes.
So you get these ugly grids where you have a white space over here.
How would we go about solving this?
And you might be thinking, hmm?
What if we just do percentages here?
What if we had four columns and we say twenty five percent?
Twenty five percent.
If I refresh this.
I have four columns, but there's still some scrolling involved.
Although we see that things are a little bit more responsive now.
Now, you can totally do percentages with great template columns, and it's definitely a lot better
than using something like pixels, but you now have to start calculating the fact that you also have
a grid gap of twenty pixels and well, a grid actually gives us a really, really good tool that I recommend.
You use one hundred percent of the time instead of percentages or pixels or items or items.
And that is called a F.R. or a fraction.
Now, what does the F.R. syntax me, if I do want F.R. here and I save and let's refresh.
All right, I get one item, F.R. means we have one fraction in this column, so just fill it all up
if I do want F.R. again.
And I refresh, I get two columns, but look at this as I expand and make it smaller, it automatically
sizes because I'm saying I want two columns that are one F.R., one far.
Now, a better way to explain what this F.R. value means is if I do something like too far here, what
do you think will happen?
If I save and refresh.
This should give you a better idea.
All we're saying is we want three columns.
And in terms of the proportion or the sizes, I want the first two columns to be half the size of the
third column because in terms of fractions, this is twice as big as the other ones.
As I make this larger and larger, it's always going to say and keep those proportions, this is going
to be twice as large as the other ones.
So when you using sixth grade, this is the best way for you to maintain this great system and make
sure that it's responsive.
How cool is that?
Just by writing three properties, saying that we want to use the grid system, adding maybe a grid
gap and grid template columns with these F.R. values.
We've made a grid system that is quite responsive, but there are a few more properties that we can
use in excess grid, so let's check them out in the next video.