0:00 Now that we have grid enabled in our container, let's start setting up some rows and columns. I'm going to begin with a property called grid-template-columns. This is a very important property we use all the time. It's a property we set on the container itself.

0:15 Remember, we have one container here, and then 10 different boxes inside. I'm not touching the boxes right now. I'm only going to work with the container. I've turned on grid. Now, I'm going to set grid-template-columns to be a space-separated list of dimensions. I'll do 200 pixels, and then 100 pixels, and then 200 pixels.

0:36 What this will do is tell the grid container that I want three columns to find -- a 200-pixel wide column, a 100-pixel wide column, and a 200-pixel wide column, and take a look at what we get. We got a lot of empty space here. We have a 200-pixel wide column, 100, and then 200. Then our boxes just wrap over to the next line because this is all of the space I've dedicated to my columns.

1:03 If I inspect with our DevTools...and what will actually make this easier is if I get rid of all of this content in here instead of my container, just for a moment. I'll comment it out. It looks empty in here. It is empty. If I go to my layout tab again, and I turn on the grid overlay, I wish I could change the color of these lines. I can't as far as I've...I've tried. I've Googled a lot.

1:29 Hopefully, you can see there is a column here to find, a column here to find, and a column here, and then nothing over here. This is just dead space. Our grid does not have any tracks to find here. These are spaces where content can go. As we just saw, if there is content, it will fill those spaces from left to right, and then from top to bottom -- 1st, 2nd, 3rd, 4th, 5th, 6th, 7th, 8th, 9th, 10th.

1:56 Right now, the way I've set up my container is that it's 90 percent wide of the screen. I'm going to change that. I'm going to make it hardcoded, let's say, 1,000 pixels wide. If I wanted to have four evenly sized columns out of this 1,000 pixels, I could do 250 pixels, 250 pixels, 250 pixels, and 250 pixels. Now, there's other ways of achieving this repeated result that we'll see soon, but this will work.

2:25 I now have four evenly sized columns going across. Each one is 250 pixels wide. Of course, I could totally change that and have one of them be a lot larger or maybe just have a middle 500-pixel column. Small one on the left and the right and a very wide column in the middle. That's not very wide, but a little wider, twice as wide.

2:46 We haven't touched rows, right? We're not controlling the height of these rows right now. All we're doing is controlling the width of each column. That's our first grid-specific property -- grid-template-columns. We use it to define columns in a grid container. We have to have grid-enabled. If we don't, it's not going to do anything.

3:03 You have to enable grid in that container. Then on that same container, you can set grid-template-columns. Again, we haven't touched the individual elements yet. They're just filling in the columns that we defined first.