Creating a CSS Grid 0:00Let's begin by adding a wrapper for our grid. We'll call it container, that's pretty common. And within it, maybe we want a 3x2 grid. So we'll have a total of 6 items. So we'll say item times 6, and I'll number them. Okay, now if we view this in the browser, this is what you get, and it's what you'd expect. Completely unstyled. All right, let's fix that. The first thing I'll do is set a display grid on my container. This is new. But out of the box, it's not going to immediately do anything. It just sets this wrapper as a grid, and then all of the child elements within it, the direct child elements, will be treated as grid items. So what I could say here is grid template columns, and check this out. We'll say 1, 2, 3. So I want 3 columns, and each of them will automatically be sized. All right, so if I switch back and give this a refresh, immediately it changes. So you can see that we do have a 3x2 grid. Let's make that a little more Sizing the Grid Container 0:50of them will automatically be sized. All right, so if I switch back and give this a refresh, immediately it changes. So you can see that we do have a 3x2 grid. Let's make that a little more clear. I'll set a width of 500 pixels, and then set the margin to auto, and then finally a background color of a lightish gray. Okay, there we go. One last thing, though. Let's set some margin top to like 100 pixels, like so. Okay, so now, yeah, if we take a look, I have a little ruler chrome extension here. As you would expect, we have a 3x2 grid. But how do we control the height of each of these grid items? All right, well, one thing we could do is set an explicit height here of 400 pixels, and now they will automatically adjust to contain it. And let's even make that a bit more clear. We'll say for each of the grid items, it's going to have a border of 5 pixels solid red. All right, so if we give that a refresh, now you can see this a bit more clearly. Configuring Grid Columns 1:40a bit more clear. We'll say for each of the grid items, it's going to have a border of 5 pixels solid red. All right, so if we give that a refresh, now you can see this a bit more clearly. So let's decode this. How did we end up with a 3x2 here? Well, we can see on the container, we set it right here, grid template columns. I want you to think of your columns as 1, 2, and 3. So when we set auto three times, that's our way of saying we want three columns. If I only did two, and we give this a refresh, now you'll see that we have exactly two columns. But you don't have to do that. For example, we could say the very first column, so this one right here, should only be about 100 pixels wide. So if we measure this, we get about 100. Next, auto, well, that means all available space, it'll automatically fill up. So you can see already, very, very quickly, we have an incredible amount of power when it comes to how you construct your Defining Grid Rows 2:26well, that means all available space, it'll automatically fill up. So you can see already, very, very quickly, we have an incredible amount of power when it comes to how you construct your grids. And before this, it was quite a bit of work. It required a lot of extra HTML to set these sorts of things up. Very, very tricky. Now, moving on. At the moment, we have two columns and three rows. And at the moment, the rows are automatically filling up the available space. So if we switch back to code, you'll see that for the three rows, yeah, they're automatically going to adjust to fill up 400 pixels. However, we can be explicit if we need to. So just like we can set the columns, I could say my rows would be, how about to start 50 pixels, 25 pixels, and then auto. Okay, take a look at this. So now what we're saying, and notice, top to bottom, 50, 25, auto. So this first one will be about 50 pixels high. The next one, we set to 25. So that'll be about Scaling to Four Columns 3:15Okay, take a look at this. So now what we're saying, and notice, top to bottom, 50, 25, auto. So this first one will be about 50 pixels high. The next one, we set to 25. So that'll be about 25 pixels high. And then the final one, we set to auto, so it's going to fill up all remaining space. So the key thing to understand here is the number of values you provide correspond to how you want your grid to be presented. So again, here, we wanted two columns, so we had exactly two values. But imagine we have two more, and this will be seven and eight. And now we want a four by two. Let's come back and give this a refresh. If we want four columns here, well, then we would need to say at the top, let's do this. We'll say auto, auto, auto, auto. There's also shorthand that we can review in a minute. So we're going to have four columns where each item has its width automatically set. And then for rows, we're going to have two of 50 pixels each. But now notice Adding Grid Gaps 4:04can review in a minute. So we're going to have four columns where each item has its width automatically set. And then for rows, we're going to have two of 50 pixels each. But now notice there's no gutter between the items at all. And traditionally with grids, this once again is a little tricky, and it makes the math a lot more complicated. But now we can just say grid gap and anything you want, one in. So if we come back and give that a refresh, now we have a consistent gap everywhere of one in. Now, don't forget the height of the row is being set right here. But if you instead wanted to fill up the available height, once again, you can just set this to auto, or you can actually leave it off entirely, and it will expand to fill the available space. All right, so I hope you're excited. In the next episode, we'll take another step.space. All right, so I hope you're excited. In the next episode, we'll take another step.
