-: Now that you know some of the fundamentals
of CSS Grid in practice,
let's now also learn some theory about it.
And so just like with Flex Books,
the first question that we ask is
what actually is CSS Grid?
And at the most basic level,
CSS Grid is a set of CSS properties
that web developers can use to build
2-dimensional layouts.
And when CSS Grid was first developed and
brought into browsers a couple of years ago,
the main idea behind it was that now we could
divide a container element into rows and columns
that we could then fill with it's child elements.
And a lot of stuff is possible here.
So things like spending elements across multiple rows
and columns overlap different elements and more.
So we use CSS Grid in 2-dimensional contexts
where it allows us to write a lot less than HTML
and also easier to read CSS.
And you will start appreciating these characteristics
of CSS Grid once you actually start using it
and maybe comparing it to things like Flex Books
or even float layouts.
So CSS Grid completely changes the way that we envision
and build 2-dimensional layouts with CSS.
And therefore we can say that in a way,
CSS Grid completely revolutionized CSS.
Now one common misconception that many beginners have
is that CSS Grid is meant to replace Flex Books.
However that is really not the case.
So, instead Flex Books and CSS Grid
work together perfectly.
You simply use them in different situations.
So when you need a 1-dimensional layout,
then you can simply reach for flex books.
But if you meed a 2-dimensional layout,
which is usually a grid anyway,
then you can use CSS Grid for that.
So again, one does not replace the other but instead
they work together really nicely.
And now we need to, once again, talk about
some terminology here so that when I talk about
CSS Grid we are all on the same page here.
So as we just learned, already actually,
the grid container is basically where everything happens
and we create a grid container by setting it's display
property to grid.
Then all the child elements of the grid container
will be the grid items.
So again, just like we learned before,
and also this is quite similar to Flex Books.
Right?
Then, also like Flex Books,
we also have axis here.
So we have a row axis,
and a column axis.
Now unlike Flex Books,
we cannot change the direction of the row and column axis.
Which in my opinion actually makes it
even a bit easier to work with CSS Grid.
All right, so this is the basic
terminology about CSS Grid.
However, since 2-dimensional layouts are
a bit more complex,
we need actually some more terminology
in order to really understand what's going on.
So let's look at some more terminology here.
So this is what we just saw before,
but now lets also introduce the concept
of grid lines which are these lines
which basically divide up the grids and
separate the columns and the rows.
And as you can see,
these grid lines are numbered from 1 to the
number of columns plus 1.
And the number of rows plus 1.
So if we have 3 columns, then we have 4 grid lines
for the columns.
And if we have 2 rows then we have 3 grid lines
for the rows.
And these numbers are actually important
because we can use them to place a grid item
exactly in one place in the grid
where we want it to be.
Now the intersection of all these grid lines,
so both the grid lines for the columns and the rows,
and creates all these areas in which
we can place, or grid, items.
And these areas are called the grid cells.
Okay.
So grid cells are always created
but they don't always need to be filled.
So in this case, we only have 5 grid items
but there are still 6 cells.
Simply because this is a grid with
3 columns and 2 rows.
And so 3x2 makes 6.
So, again, each of these spaces is called
a grid cell.
But they don't always need to be filled
by a grid item.
And also, they don't need to be filled entirely.
Next up, as we saw in the last lecture
we can actually create spaces
between the grid items.
And these are then called gutters
or gaps.
So, remember, for that we use the
gap property or also the
row gap and column gap property.
So technically these are actually
called gutters.
Okay?
Finally, another term that is commonly used
when we talk about CSS Grid
is the term of grid track.
So, a grid track can be a row or
also a column.
So each of these are grid tracks
and so in this example here we have
2 row tracks and
3 column tracks.
Okay?
And we call these tracks because these
concepts are a bit more about the space itself
and not about the grid items.
So, a little bit like a grid cell.
Right?
So remember a grid cell might be filled by
a grid item or not.
But what matters is there is some
theoretical space.
And the same applies to the grid track.
Okay, but now I promise that's it about terminology.
And I know that this is a lot to take
in, so please don't worry too much
about all these terms at this point.
So with time,
this will come naturally to you.
Especially things like grid cell, the grid lines,
and the gutters or gaps.
So these are important terms that we are going
to use all the time.
And so at some point,
you will naturally know about these.
And now, to finish, just like in the
Flex Books lecture,
let's now take a look at an overview
of some of the properties that we
can use on the grid container
and on the grid item.
And starting with the properties for the grid container,
the most important ones are the grid-template-rows,
grid template columns, the column-gap,
and row-gap; which together make up the gap property.
And then also justify-items and align-items
which we can use to align the items inside
rows, or inside columns.
So in other words, horizontally and vertically.
So just like before I have to default value
for each of the properties and
a short description.
So I think it would be very helpful for you
if you could print out this overview,
kind of like a cheat sheet,
so you can have it handy whenever you start
writing your own CSS Grid code.
So I will not go over all of these here now
one-by-one because of course we will
do that in practice.
But anyway, there's also two less important properties
on the grid container which are
justified-content and align-content.
So these only apply if the container is actually
larger than the grid.
And so these are usually not that important.
And right away, actually this overview
of the CSS Grid properties does not contain
all of them.
So there is actually a huge amount of CSS grid properties,
but we will not talk about all of them here in this course.
Because that would be just too confusing for beginners.
This course should be comfortable for you
as a CSS beginner and therefore
we are not going to over complicate things to much.
All right, so anyway, now about the grid items.
There is the grid-column and the grid-row properties,
which are very important to place grid items into
a specific cell.
Then finally we have justify-self and
align-self, which hopefully you can recognize
from Flex Books.
So align-self is used to override align items and
justify-self is used to override justified items for one
individual grid cell.
So, again, just like in Flex Books.
So, this is an overview of the most important
CSS Grid properties that we are gonna
use in this course.
So make sure to print this out and
have it next to your keyboard
once we start writing codes in the next lecture.