Original subtitles

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 over float 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 '1fr',

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 '1' in flexbox.

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 our 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 '1fr' 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 are 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.

All right.

And I will show you in a second what happens

when we give them here different values.

All 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'll see you back here in a minute.

All right.

So hopefully you spent 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 the solution

that if we want four columns with the same width,

we need to set all of these hear to '1fr'.

So '1fr' 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,

than all the other columns.

So now the space basically is divided into five fractions.

So two plus one, plus one, plus one is five 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, let's 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 want to 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 a sixth of the available space.

And I know that this one here is half

because now we have six units.

So three plus one, plus one, plus one is six.

And the first one gets three, which is half, right?

So this is very important stuff and very helpful.

And just like in flexbox,

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 it's 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 a 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 '1fr' and there we go.

So this is equivalent to just writing '1fr' four times.

And so one more time,

CSS Grid is making our life a lot easier.

Let's remove this here.

And of course, this could just be '3'

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 '4'

and now let's move on quickly to rows

because the fr unit is actually also available on 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 up key.

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 to 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 '1fr'.

All right.

So again, the height of this track,

this row track here is defined by its tallest element,

which is this one here with 150 pixels.

And so therefore then the entire height of this row is '1fr'

as we defined it here.

And so then the second track gets the exact same height,

because, well, that has also '1fr'.

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 there are still '1fr'.

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 the fractions.

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 just 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.