All language subtitles for 064 Building a Simple CSS Grid Layout.en_US

In this lecture,

we will use many of the things that we just learned

about CSS grid

and use it in order to build our blog 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 Flexbox,

and actually, many of this, we do want to keep.

So we used Flexbox, 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 Flexbox.

So, as I mentioned before,

CSS grid works perfectly together with Flexbox.

And so, again, for these small component layouts,

we will keep using Flexbox

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 Flexbox 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 there's a side 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 layout all of that.

Now before, when we used Flexbox,

we actually only used it on a new row element

that we created here,

which contains this article and this site, remember?

So we created a div with a class of row

and put these two elements in there,

and then we used Flexbox 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 going to do

is to deactivate that.

So let's deactivate, also,

the code that we used for the Flexbox layout.

So Flexbox 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, as for the 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 markup 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 or 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 build 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 its 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 one fr.

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 want it 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 want it to start at one.

And now we can use these grid lines here,

or we can say "span 2", 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 span.

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 want it 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 it 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 above 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.

All right.

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,

and 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 has 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 side 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 last 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 centered 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 it's 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.