-: In this lecture, we're gonna use CSS grid in order to set
up a grid that we're gonna 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 the next section
that we're gonna 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 gonna 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 diff elements just so I can show you the reusable grid
that we're gonna 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 a disc command right here
in the selection menu and then copy 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 style those.
So something just temporary
which we will delete a bit later, but
and actually let's style the section how as well.
So instead of just doing that later,
I'm gonna 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, giving those four also
some background color just so we see them.
So I can say here first or actually the N child.
And then the first one, background color.
Let's go with this one here.
And now I will again use that shortcut 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 diff elements that are in there.
So let's add that in all of these that didn't work somehow.
Ah, 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 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.
Okay? So that's the whole point of this lecture.
And well, let's do it right here for now.
So I will simply create a new class here
which I'm gonna 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 one FR twice.
So remember that this is the exact same thing
as writing one fr one fr 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 gift this 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, two 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 gonna do now?
Well, now we just have to add grid to calls here
to this class list, and then here, grid
three calls.
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 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, is four 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 four 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.
And so this container is gonna be the element
that we're always gonna use in order to center the content
on our page, so inside of the browser view port, right?
So as always, we need to define a width here
and we do that again using the max
with property to make it nice and fluid.
And here I'm gonna 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 1,140 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 year, we are now defining
that most of the content on our page
which will live inside a container
of this will have this width here or less.
So when the view port is less than 1200 pixels
then of course the container will shrink down, right?
Then we can center it 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 auto 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, right. Now.
Okay, And now we can apply this once again, for example here
let's add it first, but the order doesn't matter, of course.
So now this element here is gonna 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.
Now here, we still have those because they come
from down here from these, which are a bit too
big to fit this view port, but here actually it is happening
and 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, right?
So there we added 3.2 pixels
or REM actually.
So here, And so let's do the exact same thing here.
Okay? So yeah,
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 1,140 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 said.
So we defined 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, okay?
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, right?
So exactly what we had also up here, right?
And when I say background color
then the same might also be true
for some kind of background image, right?
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 DIFF element.
And so this is the one with all these classes,
Right,
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, right?
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 styles
since we do no longer need them actually.
Anyway,
so we can maybe just leave this here.
And so now we want
the diff that is a child of the div of the section 'How'
So that will then select these four here
and 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, right?
And then again, once the view port shrinks
we then get this nice space right here.
Now, okay, so that works beautifully.
This one we no longer need
and well, let's just keep them here for now
but we don't need them anymore as well.
So the 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 gonna use these ones all the time
as we built 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 to section here, and then in there
we have a container, which is a grid with two columns.
So 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
right? However, the big difference here is
that the hero has a larger width.
So the container that we defined has 120 REM, so 1200 pixels
and this one has 130 REM, so 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, right?
And so again, that's because this section is wider, right?
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, right?
So now the container, this container starts here
as we can see by hovering over it, right?
And then the other container now starts
at the exact same thing.
And again, that's because it has the same width, alright?
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 is bigger.
Also here, we now moved to four alliance 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 w, well
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 are 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 with on the entire page.
And then you could reuse that container element also
for this situation here.
Okay? 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 hero is many times a little bit different
and a bit special.
And so it's not a big deal to hear
not have the reusable code, but then from now on
we will use this grid that we just set
up in all the sanctions that follow now, okay?
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 gonna do next is to
start building this How it Works section.
So stay tuned for that one.