Instructor: In this lecture, we will use
many of the things that we just learned about CSS Grid,
and use it in order to build or block post layout.
So we are done with this part, so let's go back here.
So back basically to this home URL.
And so this is the layout that we built before
with Flexbox, right?
So let's give ourselves some space so we actually see it.
And so now we want to reproduce the exact same
thing one more time, but this time using CSS grid.
So we no longer need this.
Then down here there is a lot
of code that we wrote using Flex Box.
And actually many of this we do want to keep.
So we use Flex Box for example, here on the author,
here in the navigation,
and also here in these related posts.
And so there in these very small component layouts
basically we want to keep using Flex Box.
So, as I mentioned before CSS Grid works perfectly
together with Flex Box.
And so again, for these small component layouts,
we will keep using Flex Box if they are simply
one dimensional layouts like this clearly.
And this one here.
So it's just a row.
And here the same, it is just like one row.
And so that's one dimensional.
And so Flex Box is perfect for that.
Now, on the other hand,
the overall page layout is clearly two dimensional.
And so for that we can now use CSS grid.
So looking at our page here, once again
what are the parts of our layout?
Well, we start with the big overall header here.
Then we have this article element.
Then this aside element,
which is on the right side of the article.
And finally, on the bottom we have this footer
which should go all the way from the left to the right side.
So, we will now use CSS grid to lay out all of that.
Now, before when we used Flex Box, we actually only used it
on a new row element that we created here
which contains this article and this aside, remember?
So we created a diff with the class
of row and put these two elements in there
and then we used Flex Box to put them side by side.
But now, since we can do a two dimensional layout
with CSS grid, we no longer need that.
And so the first thing that we're gonna do is
to deactivate that.
So let's deactivate also decode
that we used for the flex box layout.
So flex box layout is all this.
So this code we no longer want.
And actually we cannot have one comment inside of the other.
So let's remove this one here.
And now S 40 html.
So this is the row element that I was talking about
which we no longer need.
So let's comment it out.
And here also add a comment
only necessary for flexbox.
And then down there let's also take out
the closing tag so that,
well that's this one .
So I'm not deleting them again to keep them
here as a reference, but I'm just commenting
them out using command or control slash.
All right, so let's inspect our mark up here.
And so now we're back to having the header here.
So our main header, the article, the aside, and the footer,
all of them being simply child elements of the container.
And so this container is what will be our grid container.
So let's now start building our CSS grid layout.
And let's start by selecting the relevant elements
which are the container.
And once again, we already selected them before,
but I will do that here again so that we have the layout
in this case nicely separated from the rest of the styles.
So usually we do not do that, but here
since this is a learning project
it is a little bit different.
And so we will do it the other way around.
So having everything together
once we built our next big project now okay.
But anyway now we need the main header.
And this is not a class, but just the element.
So then the article, then the aside,
and finally the footer.
And now as I was saying this container is
what's going to be our grid container.
Okay? But just with this, nothing is going to happen because
by default, CSS grid
places it's grid items into rows.
So we now need to define our columns
using grid template columns.
So how many columns do we have?
Well, it is just two, right?
So one for the article and one for the aside.
And do you remember the size of the aside?
I think it was 300 pixels.
Yes. So that's what we put here.
So that is going to be the second column.
And then as a first column let that simply be
all the remaining space.
And so for that, remember we can use 1Fr
or actually it could be any Fr here
because this is the only one, but as a default
we simply use 1Fr.
And so if we give it a save now, then something
must have changed already.
And indeed now it looks different.
So this one here is the header.
Then here we have the article.
And then here the aside and the footer.
So we do indeed have a grid with two columns, but
our items are not exactly where we want them to be, right?
And so let's go ahead and fix that.
So we want the main header to not simply be
this one cell
right?
So not just this one cell,
but instead we wanted to span all the way to the end, right?
So we want it to be in the first one
and in the second cell as well.
So if we turn this on,
you can see of course our two columns.
And so here, grid line one, two, and three.
And so to do what I just said
there are multiple ways of achieving it.
So here, remember we can use the property grid column
to place this element where we want it.
And then we wanted to start at one
and now we can use these grid lines here
or we can say span two for example.
And so that works.
So that's already looking actually quite perfect.
Now, another way in which we could have done this
remember
would have been one and then slash minus one.
And then we wouldn't have have to thought
about how many columns we want to spend.
All we had to think about is that we want to go
from the beginning all the way to the end.
And so that's usually the way that we do it.
Now, the same thing for the footer
which is similar in that regard.
Let's just give it some background color
so we can nicely see it and the color
doesn't matter for now.
So we see that the footer is just like the header previously
of course only in one grid cell by default.
But we wanted to go all the way here to the right side.
So we just do the exact same thing as before.
So grid column and one slash minus one.
And now, and so now indeed it stretches all the way
to the end there.
So let's get rid of this.
And actually, right now,
it looks almost ready already, right?
We are just missing this gap here in the middle
which remember we used to be 75 pixels.
So yeah, let's do that on the container.
So that is the column gap.
So column gap,
75 pixels,
and well,
there we go.
So the article is back to being 825 pixels wide
just as we specified in the very beginning
in our very first float layout, right?
But now we don't have to specify any of this width
because CSS grid simply figures that out
automatically for us.
Now the aside is of course also 300.
And so everything together makes up
our 1200 pixel container.
Great. So this is basically almost ready
but we can actually do better.
So usually what we want to do is to concentrate
all the styles that are about the grid
in the grid container, and that should include spacing.
Now, we already did that for the horizontal space
so for this space here by using the column gap property.
But the rest of the space here
so this vertical space actually comes from margins.
So there's a margin right here.
And there's also some margin,
yeah, here on the article.
So again, we should actually concentrate these spacings all
on the grid container because that makes our code
a lot easier to understand when we analyze it later.
Alright?
So again, notice that this here has a margin bottom
of 60 and the same for the header.
So this main header, yeah
somewhere here it says that the margin bottom is 60.
And so let's remove all of that.
So we want no margin bottom on the elements.
And actually let's not write that here,
but let's really remove that extra margin,
because this layout with CSS grid
will actually be our final layout.
So let's look for those 60 pixels.
It should be at the very top, I think.
Yeah. So here we have it in the article.
So let's comment that out,
and here in the main header as well.
And so that is confusing especially if the layout
was a lot bigger.
So the space is now gone, but we can easily bring it back
with just one line of css, which is
row gap of 60 pixels.
And there you go.
Now you have the space here
and it's nicely visible also in this grid overlay.
And so doing it like this is a lot cleaner,
and yeah really a lot better for
maintaining your code in the long run.
Okay, and now just to finish this aside element here
is now back to stretching itself all the way to the bottom.
So let's say that we don't want that,
and that we want this element only here at the top.
So how do we do that?
So basically, how do we rearrange this element inside
of the grid cell?
Well, for that, we use one of the items property.
So justify items or align items, right?
Remember that?
So in the case of vertical space, we use align items,
right?
So again, let's come to our grid container, and in case
that this is confusing, you can just review the
less lecture, I think, or also the cheat sheet where
I have listed all the CSS grid properties.
So align items is, remember used to align
the grid element
so the grid item inside of itself.
So, for example, remember one of the popular options is to
set it to center.
And here it's actually align items.
And so now, this one here moved to the center
now, right?
And this first one here didn't change anything
because this element is actually the one that dictates
the size of this row, right?
So if you notice, we actually did not define any grid
template rows, right?
So basically we are simply allowing CSS grid to
adjust the rows to its content, okay?
And so that's why I actually said earlier that it's pretty
common to only define columns and not rows.
Because many times the rows are simply defined
by whatever content they contain.
So again, in this case, it is this piece of content here
which dictates the size of this entire row.
And so, if we center the grid items, then vertically
of course this one here is not going to move anywhere.
But this one is.
And so let's now push it to the start.
And remember that is just start not flex start,
like it is in Flexbox.
Okay? There you go.
And actually, that's it.
So this is the third way of building the exact same layout.
And if you ask me, this is actually the very best way
of doing so.
But now I'm pretty sure that you need to practice
these skills a little bit more.
And so you can do that right in the next lecture
in the final coding challenge of this section.