Original subtitles

So I hope you're excited

to start learning about CSS Grid.

I am for sure and I actually can't wait

to finally show you CSS Grid.

And to start learning CSS Grid,

the best thing is to once again, do that in isolation.

So just like we did here with flexbox,

which we no longer need,

we also have a starter file for CSS Grid.

So this HTML file right here

is what we will start using to learn CSS Grid now.

And again, we already connected that file here

in our navigation of our main page.

So here we have cssgrid.html.

So if we go here to our page and click that,

then here is our starter file.

So you see actually we have two container elements here,

so let me show that to you.

Yeah, so we have container one and container two.

And the first one is this one here

so basically with the same eight HTML elements

that we had before.

Okay, so don't worry about this one here for now

let's actually turn this one off for now

and to do that, we can do something

that we haven't done before.

So let me show you something new

and that is display and we can set it to none.

And with this, it will simply

be completely removed from the page, all right?

But anyway, let's now get started with CSS Grid here

in this container one.

So CSS Grid is right now the most modern way

of building layouts and it's also the most complete one

and in my opinion is even the easiest way

of building layouts at least if you use

only the fundamentals.

And setting up a simple grid takes less than a minute

so let's quickly do that.

Now, just like in flexbox

we have flex containers and flex items.

In CSS Grid, we have a grid container and then grid items.

So it's very similar logic and so our a grid container

is of course going to be this one here.

And so in order to declare that here in our code,

we can write display and now it's not flex,

but grid, all right?

And that's actually it,

so visually this changes nothing in this case

because now we need to actually define

our two dimensional layout.

So basically, our columns and our rows.

So let's do that.

So we use the property called grid template columns,

and now here we can define as many width values as we want.

And then for each of these values,

one column will be created.

So let's say we write 250 pixels and 150 pixels.

So just these two values.

And so this code will generate two columns,

one with a width of 250 pixels

and another one with a width of 150.

So let's save this and indeed, there we go.

So we have indeed now two columns

and if we inspect this we can see of course

that the width are just what we specified there.

It needs some more space here.

So indeed this one has 150 and this one has 250.

And in CSS Grid, if we turn on this visualization,

we can actually see a lot of different stuff,

but more about that later.

So as soon as we start creating some columns,

then all the elements will be displayed in columns and rows.

And so as many rows will be created as necessary.

So let's add some more columns here, why not?

So let's say that we wanted a four by two grid,

so a grid with four columns and two lines.

So lets add another one here,

and then another one let's say this one has only 150

and well now there's not enough space.

So let's just like before remove this one here a little bit,

and then maybe we can change this to just 200.

Let's see,

let's decrease this a little bit more

and maybe this can be just 100

and so then this makes everything a bit easier to see.

But anyway, what's important to understand here

is that these grid items

will now placed in these four columns

and then as many rows as necessary

are created to accommodate for all the content.

So if we had another element here,

let's say like this,

then of course a new row would be created

and the new item would be placed there

and the rest here would simply be left empty.

But for now, just for this demo, let's leave it like this.

And let's notice something else here,

which is that just like in flexbox

the elements stretch across the entire cell.

So basically across the height and the width

that we defined for each cell.

So each of these areas here between

the columns and the rows.

And a bit more about these terms

actually in the next lecture.

But what I was saying is that since this element here

has a height of 150, so this green one,

then this entire row will have that height.

So in order to accommodate for that height,

and all of these elements will then stretch

as far as they need to basically fill that entire row.

So if this did not exist,

then the row would simply be the height of this content,

which is the reason why this row is in fact

only as tall as this cell here, so as this grid item, okay?

So that is at least the default behavior,

but of course we can also size these rows

to make them as tall as we want.

So we can size the columns like this

and so of course we can also size the rows.

So grid template and then as you might have guessed rows,

and let's say we wanted the first one to be 300 pixels tall

and the second 200 pixel.

So the idea is the same as with the columns.

So the first row will get this one,

the second one will get this height,

and so if we save this, this is what it looks like.

And now this grid item here,

which has that defined height of 150,

does not stretch across this entire cell here

while these other grid items fill the entire cell,

as we can see here with these colors, okay?

So this is how you create a simple grid.

So actually all you need would be the columns

and if you then want to also define the rows,

you can do that by giving them an explicit height, okay?

Now, just to finish this lecture, just like in flexbox,

we can also specify a gap in CSS Grid.

And actually this is the only way of defining space

between the grid items.

So always use gap and never margins

that is simply not going to work.

So we can use gap and this property actually

used to be called grid gap,

but they dropped that grid prefix

when they also added gap to flexbox.

So now it is simply called gap,

but if you for some reasons see this somewhere,

then just know that this is exactly the same

and it will also work in browsers.

But anyway, let's define now a gap,

let's say 30 pixels and this will do exactly what we expect.

So it creates some gap between these elements,

both between the columns and the rows.

Now what we cannot do in flexbox,

but can do in grid is to actually define

separate values for the column and for the rows.

So let's do that.

So we can say the column gap should still be 30.

So let's remove this one

and then the row gap should be,

let's say double so 60 pixels.

And so if we give this a space now,

then you see some additional space has been created here

to accommodate for that bigger gap.

And so the entire grid has become a bit bigger

and now here we have more space, okay?

And that is the very, very fundamentals of CSS Grid.

And I'm sure you can already start seeing

the great power of this layout technology.

So it's just these five properties

we created this really complex layout.

So even though it doesn't maybe look so complex,

it actually is.

And back in the day before flexbox and CSS Grid,

this would have been really,

a lot more difficult to achieve.

So CSS Grid is really powerful and this is just the surface,

and until the rest of this section,

we will explore a little bit more

about everything we can do with it.