My name is Carl and this is Webb.

Dead simplified.

We make the Web easy to understand and accessible for everyone.

In this video, I'm going to be discussing everything you need to know about CSS Grid.

I'm going to start by talking about what CSS crit is goingto when you should use it and then finish up with going over all the syntax.

Perseus.

That's cred.

So let's get started back.

The easiest way to get started with CSS crit is to compare it to what its most somewhere to which is flex box Fox Box.

I've already created entire video on, so if you haven't seen that, make sure you check it out so that you can continue watching this video.

So Fox Box essentially is just a way to lay out things in one dimension so that their flexible and they can change their size dynamically based on the content inside of the fuck's box, container grid is exactly the same, and that had a large layout either's flexibly inside of the container, but it allows you to do it not in just one dimension, but in two dimensions.

It also allows you to line up items within those dimensions, both vertically and horizontally, just like Fox Box does.

And it's essentially flex box, but for two dimensions instead of just one dimension.

It's incredibly powerful but difficult to wrap your head around due to the complexity of the layout mechanisms.

So we need to talk about a little bit of terminology first, before we can continue further.

The first thing that I want to mention is that you have a great container just like you do in flux box.

This container is the object that wraps all of your different grid items.

So in this picture the container is the square that wraps all the different objects inside of this grid.

Then, inside of that great container, we have different grid items, which are all these multi colored boxes of different sizes.

They're all items inside of the grid.

They just have different sizes and take up different positions inside of the grid.

We then have big gaps between our items, which are called ready gaps.

And then we also have our lines for parade tracks, which are these dividers that you see between all of our different rows and columns that are grid is composed of.

So now that we have the basic terminology out of the way, what's good starter with creating their own grid in here?

I have a visual studio code open with a project which is some basic background styles, and nothing inside of it was open that with life's over.

As you see me just have this dark background, we can get started by creating a container to wrap our grid items.

So what's credited?

I'm gonna give it a class here of great container and inside of that, we're going to want to put a different grid items.

Someone is quite different.

Great items give him a class.

A great item will also give them a class of which number they are, so they can easily distinguish them.

So we have a great item one still good out of two and gridiron three.

And if you say that you said that we now have these different items showing up on our screen, so they're easier for us to visualize.

We have no style is being applied to them other than the visual stock us themselves.

So to get started and created grid, we could open up our styles that CSS and we need to display grid for our grid container.

So we select our good container and in here just put display grid.

If you say that, you'll notice absolutely nothing changes, and that's just fine.

Grid by itself doesn't define any rose or columns for us to work with, so by default it just looks exactly the same as normal lives inside of the container.

What you need to do to make grid become an actual grid is to find specific columns or rose for your grit.

So to do this, you used grid template and then you'll say columns if you wanted to find your columns and in here you put a list of all the different column sizes you want.

You can use percentages, pixels, E M, R E, ems, whatever you want to define her sizes.

So, for example, if we wanted to have a 200 picks up calling 100 pixel column, we say that you see, we have a 200 pixel column on the left and a 100 pixel column on the right, and then our grid, perhaps to the next row, where it has another 200 pixel column.

So our grid is essentially two columns wide, and I have a 200 pixel column and a 100 pixel calm.

But what if we wanted our coms to flexibly size themselves based on the items inside of them?

That's where we use what's called the fraction unit.

So instead of 100 pixel calm, let's say we wanted this to be one fraction of our size.

And instead of 200 pixels, we want this to be two fractions.

This words exactly as Flex Box does for flex grow, and that the two fr is going to be the same as Flex Grove, too.

And one fr will be the same Miss Flex Grove one.

So essentially to fr will be twice as much space taken up as one fr.

If you say that you see that are items on the left here in the first column are twice as large as the items in our second column, and that's because of these fr units that we defined.

Another thing that you could do with grid went to find your actual combs is to use a repeat.

So if we wanted to have, for example, four columns there were all 100 pixels wide.

Instead of writing out 100 pixels four times, we can just use the simple repeat command and inside of the repeat, we just put how many times we wanted to repeat on.

We put how large we want that size to be.

If we say that we now get 4 100 pixel wide columns.

If we go in here and add a few extra great items, you'll see that we have 4 100 pixel white columns and this one wraps onto the first column.

When we get to the fifth item, that's exactly how we want it.

We can also do the same thing for a rose so we could do a grid template rose instead of combs.

I must say, we wanna have a 200 pixel tall wrote for our first road, and we want our second real to be 100 and 50 pixels.

Talk if you say that we now have a 200 pixel role for our first room on 150 for a second, but if you don't know how large your great is going to be, so you don't know how many rose, it'll be.

You can use what's called Grid Auto rose, and this will determine the size of all Rose that get added after 10 foot rose.

So, for example, we can put in that We want all of our rose to be 156 I was told.

So if we delete this template, rose here and say that now all the roads that aren't defined, which in our case we have no defined Rose.

So all of our rose will be 150 pixels tall if we add back in that grid template rose and we make our 1st 200 pixels.

But we don't define our second row.

It was just default to this altero of 1 50 As you can see, our first rose 200 on our second rose 1 50 Let's change our columns back here to be 200 pixels, 250 pixels, Just so it's easier for us to see.

We'll get rid of all these things for our Rose.

Say that And now we have our nice to column way up on what's as some content inside of our different good items to see how they scale with different sizes.

Contact inside of our 1st 1 here was just at a little bit of text will say 50 words here instead of our 2nd 1 What is that?

25.

If you say that you see that this first grid item is much longer than our second good item on our second grade, Adam just grows to fill that amount of space, which is exactly what we want.

But let's say instead of our styles here at a grid auto rose back in.

And let's say we have defined our rose.

We want them to be 150 pixels.

Call if you say that you see that our textures overflows outside of our great item, which is not what we want.

We want our grid item to grow to that size but 150 pixels minimum so we can use what's called many Max to define what we want our minimum size to be on our maximum size for a contact to be so we want our minimum roadsides be 1 50 on our maximum to the auto, which means it'll just still the amount of space that needs to put its content.

If you say that you now see that our first row fills the amount of space it needs to put that content and our other rose are that 150 pesos told, since they have no content to fill the extra space and that's exactly what we want.

Now let's remove that content from here so we can see are viewable the better and every gun we got rows back exactly like we want.

Now we can talk about spacing are rows and columns apart from each other.

We could do this with big grid Gap property, so we have the grid road cap, which in turn is the space between our rows.

What's, for example, putting in 20 pixels?

If you say that we now have 20 pixels between all of our different rose inside our grid, we have the exact same property for calm.

So, for example, we could put 10 pixels between all of our columns, and you see, we now have 10 pixels between the columns, and if you want the same value for both the row and comb, you could just use the Grid Gap Property, which that's both the column and Roca to be 20 pixels in this case.

And now you see, we have 20 pixels between all of our different grid items on the rows and columns, and that's for the most part, all you need to know about size and you're different columns.

You're different rose and your gaps.

There's only one other way in which you can lay out your columns and rows, and that's using grid template area.

Great temple areas allows you to create different strings for the areas that you want your different coach take up.

So in our case, we'll say we wanna have a heavier and another header.

So we want our header to take up the 1st 2 rows just like this.

And then we have one of our great items would say grid item one.

In this case, we could give it a grid area of header.

Now, if you say that you see that this temple area, our entire first rope, is going to take up the space of this header.

We can't even define further Rose after that.

So let's say we want our next round to be sidebar content and then again, sidebar content so we can use our great item to here.

We can set this to be a sidebar for the grid area.

Let's do the same exact thing for a great item three except for it.

We're going to make it content.

Now if we save this you see that we have our sidebar on the west side here and are content on the right side here.

So these great template areas allow us to name our different items based on an area and in position it in our rose using the template concept.

So we lay the road, the areas that we want free tro So, for example, called one will be header calling to will also be header.

So little spanned both of those combs.

Our sidebar will be in column one for both row to andro three and so on.

So little follow the template columns and rows we have set up and I will put these objects in the different areas that we've defined.

This is great for when you want to reposition elements on different sides screens or shrink her grow elements based on your screen size.

But it's not something that I use very often when I'm creating grids because I prefer to style my elements using grid column and great row on the elements which we can talk about now.

So it's removed these template areas.

I need areas, far different items.

We could do the exact same thing of spanning across our different columns by using grid cold.

Start to determine which column the grid item should start in.

So our case, we wanted to start at the very first call, so we'll just put one in here, and then we can use grid colon and to determine where we want this great calm to end.

And you may think that we want to put two in here because we want it to end in the second column.

But the way that the columns work and the rose working our grid is a bit different on the right here.

You see that we have our very starting column, which is on the far left.

This is calling one.

Our second calm is actually this break between column one and call him, too.

So our second line is right here in between great Adam two and three and then call him three is actually the line of very end of our page because each column that we have each section has a start and an end.

So if we started at one and ended it too, we would just be covering up this first section.

And if we want to start it one and go to the end of the line, we would have to use the column end of three here.

If you say that you see that now we still spend the full header, which is exactly what we want.

If we were to change us back to two likely attention earlier, you see that it only covers this first grid area.

Another way to do this is to use negative one which will span all the way to the very end of the column.

Never go.

You see that?

It goes all the way across the road.

So it's negative.

One corresponds to the farthest away column on the right side of the page.

You can even shorten this further by using the grid column property, putting our start at the beginning, using a slash and then putting our end at the end here.

Have you say that we get the same as I think as yours in great columns.

Start and end separately.

We could do the same thing again for our Rose Sofer, Great Adam, To which used the grid road start And we want to start in the second round here, too.

And then we want to use grid row and we want to end in the fourth row, just like I mentioned earlier.

If we end in the third rope but only fell one slot, we want to go to the fourth row so that it will fill two spots.

We want to do that for both of our great items here.

We saved that.

You see that we now get that same layout we created with the template areas.

This is incredibly useful for creating layouts that spanned different sizes of our column.

Also, you can use the span property.

So if we wanted this to span two columns, and we could just say span to have you say that it will now take up two column with something down here with my grid rose, we could change this to be span two, and I would just take up to Rose and same thing down here.

You may go now.

Properties are items are spending two rows.

We could even change us to be spent three, for example.