Name: Learn CSS Grid in 20 Minutes
Uploaded: 2020-03-28T10:16:19.000Z
Duration: 18 min 35 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

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.

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 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.

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.

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.

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?

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.

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.

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.

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.

Subtitles ListPlay Video

Learn CSS Grid in 20 Minutes

essentially

incredibly

content

stretch