-: Welcome back after that, hopefully helpful theory lecture.
So now let's keep talking
about creating and sizing grid columns and grid rows.
So in our very first lecture about CSS grid
we already learned how to create columns and rows like this.
Right? Now for me, actually, most
of the magic of CSS grid comes
from a very new unit, which is the Fr unit.
So using the Fr unit here instead
of pixels will allow us to very easily
create flexible columns and flexible rows.
So again, using pixels allows us to only
give these tracks very rigid dimensions.
So these here are always 200 pixels no matter what.
So if I resize this like this or like this
the size always stays the same here of these columns, right?
So at some point it even overflowed the container, right?
And so many times that is not what we need.
And instead we want flexible columns and rows.
And so as I said in the beginning for that
we can use the new Fr unit.
So let's say for example, that we want this last column here
to always fill up all the remaining space or maybe
let's say this column.
All right, let's just decrease this spacing a little bit
so we can see it better.
Maybe this one as well.
Okay, So clearly here we have this empty space
that is waiting to be filled.
And so let's fill that very easily with this third column
in this case.
So the third column is this one, right?
And so here, instead of specifying a fixed pixel value
let's specify one Fr, which stands for fractional
or just fraction.
And if I give it a save now, then you see that
this column has been expanded in order to fill
all the available empty space.
So it's a little bit like setting flex to one in flex box
right? And so now as we adjust the size here of the window
then you see that it always keeps expanding to
fit all the available space.
So now here it's getting really small, and so
at a certain point it still needs to fit the content
and so therefore then or grid will again overflow, but
at all these other width, then this column here
will attempt to fill all the remaining space.
Okay, let's try the same with this one.
So we can also set this one to the same value,
so also one Fr.
And so if we do that
then what do you think will happen to these two columns?
And that's right, they are now the exact same size
because they have the exact same value here
for the Fr unit, all right?
And so again, they're now the same size.
And if we resize, then both
of them are trying to fill the remaining empty space
and they do that basically in the same proportion
because they both have the same value here now, right?
And I will show you in a second what happens when
we give them here different values, now right, But for now
I actually want you to think about how we
can create a grid where all the columns are the same width.
So I want you to pause the video here and
create a grid where all four columns have the same width.
Then you can do the same
for two columns and for three columns.
All right?
So experiment a little bit with that
and I see you back here in a minute.
All right.
So hopefully you spend a minute doing that.
And here I will now actually copy this
and then turn this one off just so we keep this code here.
But now hopefully you arrived at a solution
that if we want four colors with the same width
we need to set all of these here to one Fr.
So one Fr all of them.
And so now no matter what
they will always have the same size, right?
So this is very powerful and very useful.
And we do this kind of thing all the time.
And if we remove one of them, then we will end up only
with three columns, but they still have all the same size.
So they all try to fill
up the available space and all in the same proportion
and the same of course for just two columns.
But let's put it back to four columns like this.
So let's quickly review what's happening here.
So in this grid container there is basically initially all
of this empty space here.
So all the way from this side to this side.
And then as we use the Fr unit here like this
then all of that empty space will get divided
up equally between these four columns.
And that is because each of them has the same value here.
So each of them is one, but now let's see what happened
if we changed one of them to two, for example.
So let's see.
And now this one here gets double the space then
all the other columns.
So now the space basically is divided into five fractions.
So 2+1+1+1 is 5 fractions.
And so out of these five fractions
the first column gets two of them
and the remaining ones get each of them each.
And the same is true
as we keep increasing the size here, let's say three
then this should now have half of the space.
And to see this
in reality lets make this a bit bigger, right?
And let's inspect this also just so we see
that this is true.
So this grid now has a width of 1096
so let's make it a bit smaller.
So I wanna make it a thousand pixels to make it
easier to understand, and that's close enough.
And so this one here gets approximately 500 pixels
which is half
and then these other columns here have a lot less.
So that's basically 1/6 of the available space.
And I know that this one here is half
because now we have six units.
So 3+1+1+1 is 6 and the first one gets three,
which is half, right?
So this is very important stuff and very helpful.
And just like in flex box
this allows us to not having to specify width manually.
Okay? Now going back here to equal sized columns
I actually want to show you something else.
So here we can also specify the auto keyword instead
of one of these units.
So if we say auto for example, on the fourth column
then it will only take exactly the size that is
necessary to fill its content.
And many times in practice, this is actually
exactly what we need for one of the columns.
So this one here is important to keep in mind.
Okay, but let's once again turn this off
because now I want to even show you something else again.
So let's write grid template columns again
because there is actually an easier way
of writing four times Fr like we did here.
So instead, CSS grid introduced a repeat function
where we can simply write, repeat, then open parenthesis
and then write how many columns you want
and how large they should be.
So let's say one Fr, and there we go.
So this is equivalent to just writing one Fr four times.
And so one more time
CSS grid is making all life a lot easier.
So, remove this here.
And of course this could just be three
and then we would get another row here.
And this row, by the way, is called an implicit row
while these two here are called explicit rows.
And that's because these first two rows
we actually did specify some sizes for them, right?
And so we explicitly defined these two rows
while this third one here was basically just
added automatically because we run out
of space in the grid that we defined.
And so this row here that was added automatically
is called an implicit row.
And in fact, we do have a way of styling implicit rows
but that is outside the scope of this course.
So usually we just always define an explicit grid
like we did here.
So by using these two properties.
So let's set it back to four
and now let's move on quickly to rows
because the Fr unit is actually also available on the rows.
So let's try that.
And in order to do this, we actually first need to
give the container a height because otherwise there is not
really anything to fill, right?
So let me show that to you, and I will move that up
here again, with the option or alt upkeep, let's put
that here and grid template rows.
And so as I was saying, if we just do this, because then
there's no space to fill, but actually there is some space
so these rows are quite tall, but let me explain you why
that is happening.
So just like before, we have this one element
which is 150 pixels tall, right?
And so therefore this entire row here will then
be 150 pixels tall as well.
And so therefore that is then one Fr.
Now right?
So again, the height of this track, this row track here
is defined by it's tallest element, which is this one here
with 150 pixels.
And so therefore then the entire height of this row
is one Fr as we defined it here.
And so then the second track gets the exact same height
because well, that has also one Fr
but let's then now actually remove this here.
And so this was the result
I was expecting in the beginning.
Okay? So now these are still the same size
because they're still one Fr, but the size is now defined
by this row because this here is the height
that is necessary to create this row.
But now, as I was saying
let's actually define a height for this container.
So if we say like 600 pixels
then you see that it looks very different.
Let's make it a bit smaller.
And yeah, so by creating a height for this container
we added a lot of empty space, which could now be filled
by these two fractional units, right?
And just like before
we could of course make this one taller
like double as tall by giving it double defractions.
Okay, let's put it back.
And usually the Fr unit is actually more helpful on columns
okay? So in fact, in many situations
it's actually enough to only define columns
and let the rows be filled automatically.
Now, just one final thing is that
of course the auto keyword is also available for rows.
So now this only takes the space it needs
and all the remaining space is automatically filled
up by this one here.
So by this first row track, which has the fractional unit.
All right, and with this, you actually already learned many
of the most important fundamentals of CSS grid.
So with this, we can already create some pretty useful grids
in the real world.
However, let's actually take it one step further
in the next lecture and learn how to actually manually place
and span grid items inside of our grid container.