Presenter: So I hope you are 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 CSS Grid.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, it 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 Flexboxx, we have Flex Containers
and Flex Items.
In CSS Grid, we have a Grid Container and then Grid Items.
So, it's a very similar logic.
And so, our 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, all columns and all 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 4 by 2 Grid.
So, Grid with four columns and two lines.
So, let's 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 these 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 were 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 Flexboxx
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 want 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, MARGIN.
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 reason 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
that 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 Flexboxx
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 as 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, with 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 Flexboxx and CSS Grid
this would've 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.