So what does it mean to display something as great after we assign an element, the display great property,
it will define the element as a grid container and establish a new grid format in context for its content.
But just by displaying it as it is not enough, we also need to specify the grid template columns and
the grid template rules.
They will define the columns and rows of the grid with a space separated list of values.
These values represent the track size and the space between the represent the great line.
Also, please note that when you leave an empty space between trek values, the grid lines are automatically
assigned positive and negative numbers.
OK, so let's start displaying something that's great.
So let's go back into our success.
And we have up here a container.
I still want to do some styling to our container.
So let's go down here and set the color.
To hash it out, give a white collar.
I have.
I was going to give the border a radius of 10 pixels.
I text the to the center.
Some font size also going to increase the font size Tulasi, one point three RAM.
And also to have the border one pixel solid, and if I don't type in any color, then the border will
be as the specific color.
So let's take a look.
Yeah, our text is gone because there's a song in here.
But what about it?
We are now going to select a great container.
Actually, this would be the great items.
Sorry about that, this are the great items agreed on the score items.
I can select all items.
Now, I want to have four items.
A special selecter, which is the 10th child, and with this I'm going to select and the child and select
all of the odds.
And by having one of the unselected going to change the background color.
To orange.
Let's let's take a look.
Hey, there we go, and the Even's.
So I'm just going to copy this.
And pasted in on the left and that's changed is odd to even this is select all of the even elements.
And it's changed the color to red.
OK, so we have this on the.
Now, I just want to have this in order for you to see the differences between the items.
OK, not a the great container, which is actually class, so let's go in here, great tache.
Container.
OK, no selecting this container, which will contain items.
So let's go back into this grid container and let's do a bit of the basic starling's, I'm going to
change the background color to hash free, free, free range to set the color within it.
The white color to the hash epithet.
And I'm going to set back Chateau.
The zero zero 10 pixels in a span of two pixels.
OK, and let's also limit the height of the container to 300 pixels for now at least.
OK, let's take a look.
There's our container.
So let me I hope we can all see this little schism between.
To want to have this at 200 percent and this also puts something.
OK, now we need to do is display this as grid, so let's go back into access and type in display grid.
Now, as soon as we do this, our items are not displayed as good, but as I said, and that also activate
our only grid in Firefox and hey, there we go.
There's a grid system.
You also have a graphic representation of the grid right here.
And if you go through this, you will hover actually over each and every element of the grid systems
or each of the children and will go back into access.
And now let's start displaying as grid.
Now let's start learning about grid template, row and column like this.
We're just going to type it grid.
That template and column, not multiple ways of defining the columns with we just need to type in here
numbers, we could start off with pixels and I'm going to start with pixels and then we're going to
go into our unit.
Now, let's say we want to have two great columns.
And as long as we are in great template column, this means that we will have one row and will define
the number of columns for each value that we type in here.
Eight column with will be defined.
So if I type in here only, let's say 80 pixels hit save.
Now, let's see what happened.
We have one column, one row and one column of a width of eight pixels.
You can also see the traffic representation right here.
Now, if you go back in here and on the great columns, you type in in excess of one hundred fifty,
let's say pixels and go in here and not only have two columns, one column is eight pixels wide and
the next one is 150 pixels wide.
Not quite with it has a width of eight pixels and a width of 150 pixels.
OK, now we could continue on with this.
Let's say we want a 250 pixel.
Column, so the first column and there we go and let's say then we want a.
Let's call them 60 pesos.
And there we go.
Well, let's call now what would happen if I want to have two equal with columns so on the left side
and on the right side, and I'm let's just say we're limited.
We want to have two columns of one hundred and one hundred pixels.
And on the right side we want to have.
So that's two hundred pixels now.
Let me think about it.
We have several hundred pixels, so 100 here, 100 here, there's 200 for the 150 here and 150 here,
the 300.
So we're left with 200 pixels.
The sum of this is 500 and 700, minus five minus five hundred is 200.
So how can we achieve that within the middle?
It should be exactly the rest of the width.
Now, we could do something like this, change the first 100, then the second one to 100.
OK, this would be one hundred fifty and this would be.
Also, 150 in a city.
Let's see what happened, we got to Collins, but in the middle, I still want to have so I want this,
too, to be on the left side and this still to be on the right side, not we could do something like
in the middle of them will type in hit auto.
And what what and what this will do is will take up the rest of the space and.
Divide it up into the rest of the amount, so let's see if we go over here, you can see all over our
columns, if I hover over the columns on the left side, overall columns, they will be displayed.
So it has a 200 on 300.
And because we're zoomed in two hundred percent and you need to zoom out.
So there we go, but I don't think you can say this is the reason that I was displaying the double amount
is because I am zoomed in double the size.
So let me go in here.
And that is zooming again to 200 is actually multiplying.
So it's actually one hundred and one of the 50 height, but it's 200 and 300 split.
So we know that the first are 100 and in our case 200 and the rest within it is well the rest that just
remains because the next two are 150 or multiply it by two, three hundred and 300 white.
OK, let's go back in here in our container and now let's start displaying the great growth.
So that's the great template and role.
And what this will do is Will specified the height of the roles.
And as soon as we type in more than one value, for example, I want the world to be only 25 pixels
and I'm going to use pixels right now.
But after this, we're going to change our unit values.
So 25 pixels.
Let's take a look.
First of all, is 25 pixel height has a height of 25 pixels.
So let's go down here.
Let's create a second row of 150 pixels.
OK, there's a second rule, if it is 200, but we know it's.
Actually, one hundred pixels and let's say that the rest, we want to leave it as auto.
All right, there we go.
So let me just changes to two hundred fifty, our fourth value.
And this is almost out of a great a larger.
And now let's say I want to have instead of the pixels, a percentage, so if I change just 25 to 35
pixel to 25 percent, let's see what happens.
This just took up 25 percent of our remaining height.
We have here all it will take off 25 percent of three hundred pixels.
We knew we know that our container is in our container.
It has a height of 300.
We took up 100 pixels.
We took a 25 percent and we left the rest with auto.
Now, let me change this fellow right here to Collum.
So instead of them patrols, we now have columns, we have 25 percent on the left side, then for the
first column, then 100 pixels for a second column, and the rest is Ottos.
Let's see how this looks.
So 25 percent for our first one.
Then we have a 100 pixel column.
So with two time zoom is 200 and the rest is automatically the rest of the width is then automatically
assigned the of this.
We're going to use a great template roll again.
And let's the 300 pixels and let's see what happens.
This would take up the entire with and can you see if you can see this and take out the numbers?
Actual elements are now pushed outside of the container because with our first row, we took about three
hundred pixels.
You can see down here this corner.
That is why I have my items as a rounded border.
We actually pushed out the fourth, the fifth and the sixth item outside of our container.
So you get you need to be extremely careful when you're assigning space to remain within your column.
OK, so let me take this out.
Let's say two hundred and there we go.
Now we have two hundred for our first column for first row and 100 for a second row, because that's
the remaining height.
Now, let's say we want to have something like a template column and we want to have two to four massive
three columns of one hundred seventy five pixels.
So we would do 175 pixels when I was 35 pixels, 175 pixels in a K.
Now we could do something else.
Instead of defining one of the first 135, we could do great template column and then we would type
in repeat and within the repeat value we need to values, we need, first of all, the amount that we
want to repeat with.
So let's say free then comma and the amount that should be repeated.
So in this case, 175 pixels, unless it's safe and we have the exactly the same result.
If I would change this to say two hundred, two hundred pixels hit save and now we have two hundred
pixels and just verify this four hundred and this is 200 multiplied by two.
We could also do this with percentages, solar companies instead of the.
Twenty pesos I would do for the.
Out of 30 percent.
XOS percent give us it's eight and there we go.
Good dose of 35, but.
This should push out, yep, it just pushed other elements outside of column cannot see the rest the
edge of our container.
And we could also do, let's say, four times.
R e m.
Or, for example, E.M..
Now, instead of this, instead of using pixels, percentages in the ATM, we could do something else,
use fractions.
You saw that in order to to have the exact with for example, with percentages, I would need to do
something like three forty five point.
135, 350, something like that, and let me comment on this one, so this will take it's not exactly
so a specific element divided into three equal parts is thirty three point three fifty 50 50 to almost
infinite.
But we could do something else now.
Great.
Let's us.
Let's let.
This was great, let us use something called friction.
Now, what this does, let's say repeat and we'll repeat three times one fraction of F are not set save
and let's see what happens.
It's exactly the same thing.
What this does is it divides our maximum width of the container into exactly three fractions.
So if I could do here for fractions, then we we would have four columns for equal columns, I must
specify.
Now, we can also do great template column one too far, and this would create only one fraction.
We could do to a far.
Also, note that one of our fathers would quit, too, but if I would change this.
Through the first column is one faction and the second one is two factions, then we would have something
like this here.
So this would be actually fifty four point forty three percent and the next one would be sixty six point
sixty six percent.
And we can now play around with this, we could also use a template column and let's say we have here
in the middle of 20 percent and then one fraction.
So this would look like this.
And we could also use.
I just saw up here our efforts are going to say four times and two percent see what this does, OK?
Now, that's pretty much it for displaying good temper.
And of course, you could do the same thing for good template.
So let me just step in here.
Great template, real and repeat three times.
Wonderful essay.
And then we have our free throws.
OK, so that's pretty much it for Gridiron Patrol and column.
And seen the next one by.