Creating a Grid Container 0:00Moving on to nested grids. Now, yes, you can have a container grid, but any grid item can also be its own grid. So take a look at this. We have a handful of boxes here, and for the starter CSS, just some basic styling that isn't related to CSS grids, like colors and border radius. So if we take a look at this in the browser, this is what we have to start. So once again, just to get your fingers in the workflow, we're always going to do this from scratch. So we'll set the container to a display of grid, and then we'll say grid template columns. I don't know, let's set up a four-column grid. So we'll say repeat four times, 100 pixels. Now if we switch back, yeah, we have four columns here for A through H. Let's set a grid gap while we're at it, about 10 pixels. There we go. Now though, what if we want this A column to take up twice as much space, and then C to take up twice as much space? Once again, not related to Spanning Items Across Columns 0:46we're at it, about 10 pixels. There we go. Now though, what if we want this A column to take up twice as much space, and then C to take up twice as much space? Once again, not related to nested grids, but do you remember how to do that? Let's do it together. You'll notice that every single grid item here has a class that corresponds to the letter. Okay, so let's say A, and we could say grid column begins at one and ends at, well, let's count the items, one, two, three, four, and five. So we want it to begin at one and continue to three. Let's come back, give it a refresh, and there you go. Next, we want to do the same thing with B. So we could say B, grid column three to five, right? So three, four, five, and there we go. However, you notice how when calculating these numbers here, we kind of have to do it mentally, or we could use this ruler, but also you can use Firefox nightly at the time of this recording. So take a look. This is, at the time of Using Firefox Grid Inspector 1:42these numbers here, we kind of have to do it mentally, or we could use this ruler, but also you can use Firefox nightly at the time of this recording. So take a look. This is, at the time of this recording, Firefox 57 beta 5. So I will inspect element, and yeah, let's take a look at the container, and you'll see that we can click on display grid here. All right, so now notice that it overlays an entire grid on top of it, and in fact, we can even go to the layout tab and inspect this further. So it's really, really nice, and at the time of this recording, Firefox is the only browser I'm aware of that supports this. So we can see here, yeah, it constructs a four by three grid. So if we were to change this, refresh, okay, well now it will compensate. So it's a really nice visual way to brainstorm, and you'll notice you can check display line numbers to get a clearer idea of which line you want to go to. So if we wanted A to go all the way here, we could just say, Repositioning with Grid Lines 2:30visual way to brainstorm, and you'll notice you can check display line numbers to get a clearer idea of which line you want to go to. So if we wanted A to go all the way here, we could just say, all right, one to four. Really useful stuff. Anyways, let's bring that back to a four-column grid, and now, once again, just for fun, let's imagine we don't want A at the top here. We want it to be at the bottom right. We've already learned this, so if you're working along, pause and see if you can figure it out. Otherwise, we'll do it together. Okay, so in the layout tab, yeah, it looks like A should begin at the third row, and then also at the third column. So let's go back to code, and let's change it. So I said it begins at the third column, and that should extend to the fifth column here. Now if I were to save this and give it a refresh, yes, it moves it to the correct column, but it's still in the wrong row. So now I could say grid row begins at theto the fifth column here. Now if I were to save this and give it a refresh, yes, it moves it to the correct column, but it's still in the wrong row. So now I could say grid row begins at the third column, give it a refresh, and now it's in the proper location. So you'll notice that I didn't specify three to four, and the reason for that is because whenever a grid item will only span exactly one line, so three to four in this case, it's redundant. You don't need to do it. So you can leave that off entirely. You would only add that if you want to be explicit or if it should span more than one. So anyways, if we give this a refresh, now A has been pushed from up here down to the bottom right. Now on that note, notice how I used that term span. So for example, here I said I wanted it to begin at the third column and then span to the fifth. So really I want to say I want it to span two columns. We could also just say span two. That's another form that we could use, Building a Nested Grid 4:08I wanted it to begin at the third column and then span to the fifth. So really I want to say I want it to span two columns. We could also just say span two. That's another form that we could use, and I'm still going to get the exact same thing here. So you might prefer that. That can be very useful. Start here and then span exactly two lines, and then once again this could be left off entirely. Anyways, this should all be a recap at this point, but we now want a nested grid within A. So let's nest four more items there. Okay, so we have A, and then within here we'll have a div with a class of box, and we want exactly four of them. And then we'll say A1, A2, A3, and A4. Okay, so now if we give this a refresh, yes, of course we can nest them, but they're not stored as a grid. So when you want a nested grid, all you have to do is find the grid item. So in this case we're calling it A, and we're just going to set a display of grid. So a grid item can also be a grid container.you want a nested grid, all you have to do is find the grid item. So in this case we're calling it A, and we're just going to set a display of grid. So a grid item can also be a grid container. Okay, so let's say grid template columns here, and I want this to be a two by two. So repeat two times, one fraction, which means they're going to take up the same amount of space. So I give that a refresh, and there you go. And in fact, let's say at that point A, and then the boxes within it will have a background color of blue. Come back, refresh, and there we go. And then finally, let's set a grid gap of 10 pixels. Refresh, and there you go. So we have a custom grid where we've moved the A block down to the bottom right, and then the A block is also serving as its own grid where we can further nest these items. Once again, if you're familiar with the old school CSS layout using IE6, dealing with floats and double margin bugs, it was anserving as its own grid where we can further nest these items. Once again, if you're familiar with the old school CSS layout using IE6, dealing with floats and double margin bugs, it was an unbelievable nightmare and not even remotely as flexible as what we have here with CSS grids.
