All language subtitles for 060 A CSS Grid Overview.en_US

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 flexbox,

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 two 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 its 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 two dimensional contexts

where it allows us to write a lot less nested 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 flexbox

or even float layouts.

So CSS Grid completely changes the way

that we envision and build two 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 flexbox.

However, that is really not the case.

So instead flexbox and CSS Grid work together perfectly.

You simply use them in different situations.

So when you need a one dimensional layout,

then you can simply reach for flexbox.

But if you need a two 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 its display property to grid.

Then all the child elements of the grid container

will be the gid items.

So again, just like we learned before,

and also this is quite similar to flexbox, right?

Then also like flexbox we also have axis here.

So we have a row axis and a column axis.

Now, unlike flexbox we cannot change the direction

of the row and the 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 two 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 let's also introduce the concept of grid lines,

which are these lines,

which basically divide up the grid

and separate the columns and the rows.

And as you can see, these grid lines

are numbered from one to the number of columns plus one,

and the number of rows plus one.

So if we have three columns,

then we have four grid lines for the columns.

And if we have two rows,

then we have three 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

then creates all these areas

into 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 five grid items,

but there are still six cells

simply because this is a grid

with three columns and two rows,

and so three times two makes six.

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 two row tracks and three 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 that 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,

specially things like grid cell,

the grid lines and the gutters or gaps.

So these are important terms

that we're gonna use all the time

and so at some point you will naturally know about this.

And now to finish just like in the flexbox 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.

That 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 the 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 as a sheet sheet, so you can have attendee

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 are also two less important properties

on the grid container,

which are justify 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 by the way, 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 just be too confusing for beginners.

This course should be comfortable for you as a CSS beginner

and therefore we are not gonna

over-complicate things too 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 flexbox.

So align-self is used to override align items

and justify-self is used to override justify items

for one individual grid cell,

so again, just like in flexbox.

So this is an overview of the most important

CSS Grid properties that we're gonna use in this course.

So make sure to print this out

and have it next to your keyboard

once we start writing code in the next lecture.