Original subtitles

In this lecture,

we're going to use CSS grid in order to set up a grid

that we're going to be able to reuse

over and over again on our page.

And let's start by adding some HTML here.

So I will actually add now with the next section

that we're going to build,

which is the, how it works section.

So here we have the section hero

and then after that,

but of course still in the main part of the page,

we're going to have another section

which is called

section how.

so, which stands for how it works basically.

Okay. And now here,

I will simply add a couple of div elements

just so I can show you the reusable grid

that we're going to create in this lecture.

So test one let's just copy this,

or actually let me show you an even better trick,

than copying it,

which is using this command right here in the selection menu

And then copy your line down.

So this is something that I use all the time.

And so I even created a special shortcut for it,

but for you,

the shortcut should probably be similar to this one here.

So that is alt or option

and then shift and the arrow up key.

But for copying down,

it is option or alt shift arrow down.

So watch what happens when I click here,

so basically it will simply duplicate this line.

And so I do this a couple more times,

and this is again,

something that I do all the time when working in VS code.

Okay.

Now let's just quickly a style those.

So something just temporary,

which we will delete a bit later.

And actually let's style the section, how as well.

So instead of just doing that later,

I'm going to do that immediately here.

And so that I will do down here because of course,

we're going to need some additional code for this section.

So I'm also copying here this comment

so that we can create a nice additional code block here.

So the how it works, section

and then here let's add a padding,

and I will do the same padding

that I also used on the hero section.

So 96 pixels on top and bottom,

and then zero on the sides.

And for now let's just give this

some background color actually.

Let's say orange, red.

Okay and now just giving those four,

also some background color,

just so we see them.

So I can say here first,

or actually the nth child,

and then the first one

background color,

let's go with this one here

and now I will again,

use that shortcuts to duplicate the line.

So that is shift option and arrow key down.

So number two, three and four

here let's use blue,

violet and maybe some yellow color.

Okay. Just quickly checking it out.

Oh, somehow that didn't work.

Oh, and indeed here,

we only have one section, how,

so of course I want to select the nth child

of the div elements that are in there.

So let's add that in all of these.

That didn't work somehow.

Now that's better.

Let me just give them some padding here.

And this is temporary,

so we can just use pixels

and also the font size of even something like 50 pixels.

Okay.

But now let's say that if we wanted to arrange

these four here in a two by two grid, for example.

So how would we do that?

Well, we could of course go back here to our section how,

and then set up that grid. Right?

However, we would then write that code

maybe multiple times over and over again

in different parts of our website.

And so that's something that we want to avoid.

And so instead I will actually create a reusable grid.

So that's the whole point of this lecture

well, let's do it right here for now.

So I will simply create a new class here,

which I'm going to call grid.

And then of course I will make it a grid container.

And let's also add some gap here, maybe again, 9.6 REM,

and here it needs actually to be REM as well of course

not pixel.

And I said that I wanted a two by two grid.

So that means two columns.

So grid, template, columns.

And so let's actually use the repeat function

and then saying that we want 1fr twice.

So remember that this is the exact same thing as

writing 1fr, 1fr right?

Okay, and so this,

now we can add here,

right?

And so now the section how, is also a grid

and so this code also applies now to this element.

And so if we give this a a safe,

then we should have our grid

and indeed here it is.

Right?

Okay, but this is actually not really reusable yet

because let's say that we have another section then,

let me just copy it here, why not?

So now we have it twice here

and indeed it's exactly the same thing,

but let's say that this one here,

I actually wanted it to have three columns.

So what would we do then?

So we cannot change this one

because the first grid here,

we still want it to be two by two

only this one here should have three columns.

Right?

And so the way to make this really reusable

is to basically export that style

from the grid and create yet another class

that we can then add here and here.

So let me show that to you in practice.

So grid, and then here,

I like again to use these two dashes

to say that this is a variation of the original,

so grid 2-cols,

which stands for two columns.

And so here we will now add this code.

Okay.

And then we can copy it and say, grid three columns.

And then here, we of course want to repeat this three times.

So can you see what we're going to do now?

Well, now we just have to add grid

2-cols here to this class list

and then here grid 3-cols.

And so with this we're going to achieve

exactly what we wanted,

right?

So our first grid is a two-by-two.

So with two columns

and the second one has three columns, right?

And so now our grid element here is way more versatile

all over our page.

So we can use it in different situations

and then simply use this other variation

of class here basically

to create a grid with two or three columns,

or we might even need four columns

and so that is very easy as well.

So let's say here we wanted actually four.

And so here we go.

So now it is columns.

And we can of course also see that nicely

in the dev tools where we see of course,

or actually here the parent, of course.

So here we have the grid code applying.

So the code from the grid class.

So this one here, and then we have the grid 4-cols,

of course.

So this one here,

which then makes it so that we have the four columns

as we specified here.

Right?

And so this is a very nice technique

to basically export these different styles

into different classes in order to make them

reusable across our page.

Now another thing that we might want to reuse

a couple of times over our page

is a centered container element, right?

So that's something that we have used a couple of times

in past projects and actually already...

also in our hero section. Right?

And so let's actually also export that

into its own class like this.

So a generic container basically,

let me do that here.

And a bit later,

I will then of course move all of this code here to the

generic section in our CSS file here.

But now let's create a container here.

So this container is going to be the element that we're

always going to use

in order to center the content on our page.

So inside of the browser viewport, right?

So as always, we need to define a width here

and we do that again,

using the max width property

to make it nice and fluid,

and here I'm going to go with 120 REM.

So that's basically 1200 pixels

and that's kind of a standard we might say.

So that's something that many pages use.

Another one is 1140 pixels.

So this is somehow also some kind of convention

that you can also use.

And that's actually very similar to this 1200 pixels,

which I really like to use.

So basically with this here,

we are now defining that most of the content on our page,

which will live inside our container of this

will have this width here, or less.

So when the viewport is less than 1200 pixels,

then of course the container will shrink down, right?

Then we can center it

and also using margin

set to zero and auto.

And remember that this auto here,

basically what it does

is to give the same margin to the left and right side,

and it will be figured out automatically.

And so since these two margin values

are the same on both sides,

it basically makes the content look as if it was centered.

Okay, and now we can apply this once again,

for example here.

Let's edit first, but the order doesn't matter of course.

So now this element here is going to be a container

and a grid, and a grid with two columns

all at the same time.

All right.

And here you see it

and let's shrink it down.

So all the way to 1200 pixels.

And then of course it is shrinking down.

Here we still have those...

Because they come from down here from these

which are a bit too big to fit this viewport,

but here actually it is happening what should be happening.

So everything is nicely shrinking, right?

Now here we just have that problem

that the content is all the way glued

here to the left and the right side.

And so we should probably add some padding

to our container element here,

just like we did actually right here in the hero.

So there, we added 3.2 pixels,

or REM actually.

And so let's do the exact same thing here.

Okay.

Right here.

And by doing this,

we will basically subtract 32 pixels from both sides

of our content.

And so in the end we will actually end up with something

very similar of these 1140 pixels of width

for the content.

So that's because of the box model.

So let me show you what I mean here.

So yeah, so this is what I set.

So we define this box to be 1200 pixels wide,

but then as I just mentioned,

we basically subtract 32 pixels on both sides.

And then we end up with these 1,136,

which is almost those 1,140 pixels.

And so now when we do this,

then the content is no longer glued to the sides.

Okay?

However, usually when we have a background color

on the section,

we do want the background color to extend

all the way to the sides.

So exactly what we had also up here.

And when I say background color,

then the same might also be true

for some kind of background image.

And so what we need to do

is to actually not add all of this here to this element,

so to the section itself,

but instead wrap all of this into

yet another div element.

So this is the one with all these classes.

So this one here is actually the container, the grid

and the grid with two columns.

Well, now something is strange here.

So let's inspect this.

Oh, of course.

It's because these selectors

that we did here with the nth child

are no longer working as expected,

because now this one here

is actually the first child of this section.

So this one here is now applying to the entire box,

but well, that's not really a problem anyway.

So let's just remove those tiles

since we do no longer need them actually anyway.

So we can maybe just leave this here.

And so now we want

the div that is a child of the div of the section how.

So that will then select these four here.

We just give them some other random background color.

Well, maybe not orange.

Yeah, just like this.

Okay, and so now we can nicely see

how the background color extends all the way

from the right to the left side here,

all while keeping this in a nice container

that keeps being centered.

And then again, once the viewport shrinks,

we then get this nice space right here.

So that works beautifully.

This one we no longer need.

Well, let's just keep them here for now,

but we don't need them anymore as well.

Sort of leading this style.

And so these reusable classes,

I will now put them up here.

So in the reusables

and right at the very top,

because we're going to use these ones all the time

as we build the rest of the page.

Okay, now just one more thing,

which is that you might be wondering

why we did not use this sort of container

in our hero section.

Because we actually did something a bit similar.

So we have this section here

and then in there

we have a container which is a grid with two columns.

So in this case, that is called hero,

but it is very similar if we take a look at it.

So yeah, right here,

it has the margin,

It has also the padding,

and we also declare it as a grid with two columns.

However, the big difference here

is that the hero has a larger width.

So the container that we defined has the 120 REM,

so 1200 pixels,

and this one has 130 REM.

So a 1300 pixels,

which means that it is 100 pixels wider.

And of course it wouldn't have to be like this.

So we could have done the exact same width,

but actually I like it visually better

when the hero section

is a little bit wider than the rest of the content.

So let's check that out.

And now it's not really so visible anymore

because we took away the background colors,

but you can still see that the container now starts here,

but the hero section starts a little bit more

here on the left.

And so again, that's because this section is wider.

So if it had the same width

and we can simply do that here,

then of course it would be nicely aligned with this one.

So now this container starts here,

so we can see by hovering over it.

And then the other container now starts

at the exact same thing.

And again, that's because it has to same width.

But then this hero image here shrinks

a little bit because as it has less space,

of course it needs to become smaller

and so I personally like it

when this bigger.

also here we now moved to four lines for this content,

which of course we could fix by make the text smaller.

But yeah, I think that,

especially on bigger screens,

it looks better when this...

while when this hero section is a little bit bigger,

so I can just increase this

and then you can see that

this image here gets a lot bigger

and we get more space here as this increases.

So 130 and yeah,

I think that looks better.

But of course, if later you build your own layout

and your own hero sections,

and you have a different type of content,

maybe you're building one of the headers

that we built in the previous section,

which simply had a background image

and then some content

then of course it might be perfectly fine

to simply have the same width on the entire page.

And then you could reuse that container element

also for this situation here.

So I hope that made sense.

And it is the reason why basically

we built a special section...

so a special container here

just for this section alone.

So the hero is many times a little bit different

and a bit special.

And so it's not a big deal to here,

not have the reusable code.

But then from now on,

we will use this grid that we've just set up

in all the sections that follow.

So I hope that made sense to you

and that you understand the logic behind

basically dividing the functionality

into these different classes.

So container grid, and this one here,

and that you can incorporate this technique

into your own coding in the future.

And now what we're going to do next

is to start building this, how it works section.

So stay tuned for that one.