Creating the Grid 0:00Next, let's move on to positioning. So at the moment, we have eight divs stacked on top of each other, and we have no CSS grid at play. Okay. Well, we will say on our container, once again, this is a bit of a recap from the last episode. We'll set a display of grid, and then we'll say grid template columns. And let's make this a four by two once again. So I could say auto, auto, auto, auto, so exactly four columns. And now we can see that there. Or there's a helper called repeat.And now we can see that there. Or there's a helper called repeat. So you're going to find with CSS grids, you'll do this often where you're setting multiple values. But in this case, we can instead use the repeat helper. So repeat four times the keyword auto. And now if I switch over, I'm still going to get the same thing. And that will work in a number of places, including grid template rows. Next, let's set a grid gap all around of maybe one M. There we go. All right. Why Repositioning Matters 0:48Next, let's set a grid gap all around of maybe one M. There we go. All right. So we have a basic two by four or four by two. Now with old school grids, it would very much get tricky as soon as you needed to control where something showed up. So for example, imagine we wanted this grid item number one to actually show up down here. Well, there was never an easy way to do that beyond going to your HTML and physically moving that div below. You just didn't have that level of control. Now Flexbox helped with this a little bit where you could control the order somewhat.You just didn't have that level of control. Now Flexbox helped with this a little bit where you could control the order somewhat. But now with CSS grids, you have unprecedented control. That being said, it's a little tricky to understand, so I'll do my best to explain it. So we want to move number one to the spot of number seven. Okay. So how do we do that? Well, we're going to do this one here. So I will say item, just grab the first child there, and let's give it a background color Using Grid Row/Column 1:36Well, we're going to do this one here. So I will say item, just grab the first child there, and let's give it a background color of red. Okay. So this guy needs to go here. We're going to use two properties for this. Grid row start, and then grid row end, or there is shorthand for that. Now also like grid row, we have grid column start and grid column end. Okay. So how do we figure out what these indexes should be? Finding Grid Line Numbers 2:02Okay. So how do we figure out what these indexes should be? Here's what I would recommend. So I have my little ruler here. We're going to break this up into a grid. So we have our first one, second one, give me just a minute to line this up, and then our final one. And then for rows, we'll have our one up here, one down here, you know, like you'd see on a spreadsheet. Okay.a spreadsheet. Okay. So if we want the first item to display down here at number seven, well, let's start with our grid row. For row, we have this top one up here, a second one, and a third one. So if we want to say it should display starting here and then ending here, then we can count one, two. So it should start at the second grid. And then we want that to continue to the third grid row. All right.And then we want that to continue to the third grid row. All right. A little tricky, right? But we could say grid row start at two and grid row end at three. Next let's do columns. So if we want it to be right here, starting at that item, well, one, two, three. So it starts at three and then it should end at four. All right. Let's come back. Give that a refresh.Let's come back. Give that a refresh. And there you go. We've now repositioned it. So yeah, admittedly, it's a little tricky to wrap your brain around how to figure out those values. But once you do, you should be able to do it in your head pretty quickly. So for example, what if instead we want number one to be placed in the position of five? All right. Well, grid row, it's going to start at the very first one and then it'll go to the secondAll right. Well, grid row, it's going to start at the very first one and then it'll go to the second one. So let's say one, two. And then for columns, we have one, two, three, four. And then it should continue to five. So start at four and continue to five. Refresh. And now we've moved it. And now there's also shorthand here. Applying Shorthand and Spans 3:55And now we've moved it. And now there's also shorthand here. So rather than start and end, as you might expect, you can just say grid row one and end at two. And then get rid of this. And then the same thing for grid column. Begin at four, end at five. And now I'm going to get the exact same thing. But now think about how much incredible power you have here. Like for example, what if we want one to take up from five all the way to seven?But now think about how much incredible power you have here. Like for example, what if we want one to take up from five all the way to seven? It's going to take up all of this space right here. Okay. If you want, and you're working along, pause and figure it out on your own, otherwise we'll do it together. Okay. So we want it to take up all of this section right here. All right. So grid row one, two.All right. So grid row one, two. So it starts at two and it should end at three. So grid row is two to three. Now for columns, it's going to start at that very first column. So once again, it's going to start one, it's going to go to two, it's going to go to three, and then it's going to go to four. So we want one to four. Come back, give it a refresh and bam, you're taking up all of that space. And you'll notice because we are taking up that much space, everything will automaticallyCome back, give it a refresh and bam, you're taking up all of that space. And you'll notice because we are taking up that much space, everything will automatically drop down below, which is what you would expect. Now finally, why don't we do the same thing with eight? Eight's going to go from here and that'll go to the end. Okay. Well that will be the last child. We'll give that a background color of green. And now for columns, once again, we're just going to do it together. It's going to start at two.And now for columns, once again, we're just going to do it together. It's going to start at two. It's going to go to three, four, five. So it starts at two, ends at five. Grid column, start at two, end at five. Give that a refresh and there you go. And that's all there is to it. So in this episode, you learned about the repeat helper function, you learned about grid row start and grid row end, as well as the shorthand of just grid row, and then the same for grid column start and grid column end, and then finally the shorthand of gridgrid row start and grid row end, as well as the shorthand of just grid row, and then the same for grid column start and grid column end, and then finally the shorthand of grid column. So if you ever forget, like where do these numbers come from? Just create a little grid yourself and always start on the edges. So one, two, three, four. And then on this side, one, two, three, four, five. And then at that point, you just count. So if you want something over here, one, two, three, four is where you start. And if we want it to go all the way to the end, four, end at five.So if you want something over here, one, two, three, four is where you start. And if we want it to go all the way to the end, four, end at five. You got this. So in the next episode, let's move on to something else.
