This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.

Check out a free preview of the full CSS Grids and Flexbox for Responsive Web Design course:
The "Nesting CSS Grids" Lesson is part of the full, CSS Grids and Flexbox for Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

By coding an example of a nested CSS grid within a CSS grid at different resolutions, Jen discusses the pros and cons of this approach versus Flexbox withing a CSS Grid.

Get Unlimited Access Now

Transcript from the "Nesting CSS Grids" Lesson

[00:00:00]
>> Jen Kramer: All right so then we're gonna move on here to Nesting. So if you open up Chapter 13.
>> Jen Kramer: And I believe, what have I go going on here this time? Okay, so this time what I've done is the following, I have the same fine lit web page I've been working with so far.

[00:00:21] And inside of my article, I have a series of little boxes, which I'd like to display all next to each other, okay? So there's a couple of ways that you could code this. You could try coding this just with Flex Box using these asides here, these three asides in white.

[00:00:39] You could code them with Flex Box inside of this particular article. That would be a really great way of doing things. Then Flex Box would control however many articles there were. They would wrap up onto other lines. They would adjust to the appropriate widths and whatever parameters that you happen to set up.

[00:00:56] And what I'm talking about when I say lay this out with Flex Box. I'm talking about the way that we laid out our image gallery with Flex Box, not the Flex Box grid system. There's no reason to use the Flex Box grid system if you're working with CSS grid, just work with CSS grid, okay?

[00:01:13] But in the interest of showing you exactly how a nested grid would work. If that winds up being something that is important to you, I will show you that now. The disadvantage here to the CSS grid portion of this is that depending on what kind of crazy layout you're doing in the CSS grid it may or may not repeat adequately.

[00:01:37] So if you think about the Mondrian painting we laid out earlier, it would be pretty hard to repeat that for another bunch of these articles.
>> Jen Kramer: And Flex Box, of course, you get what you got. It's gonna be a series of these boxes one after the other. But I'm just, right now just demonstrating to you how a nested grid system will work.

[00:02:00] So the HTML is exactly the same as what we have been working with before. We're gonna go to the CSS.
>> Jen Kramer: And what I've done here is the following, so remember that there's a parent child relationship in grid. You have the grid container and you have the grid items.

[00:02:21] So the grid container its direct descendants are all grid items. Anything inside of the grid items is unaffected by gri, right? So if you look at your HTML here, we have a wrapper which is our grid container. Its children are the header and the article, right? And the aside, so those are all grid items.

[00:02:44] But inside of the article itself, I now have this div with a class of nested, and three asides inside of that. None of those have any grid properties associated with them at all, because that as far as the inheritance goes from the wrapper to it's children and that's it.

[00:03:02] So what we need to do here is with this div class of nested, we're gonna declare that to be the next grid container and the aasides become the grid items, make sense? Okay, so to do that,
>> Jen Kramer: Here we'll go ahead and put in another class. I'm gonna put it in right before my media query here.

[00:03:25] And I'm gonna call this the nested class, which you saw was there inside of the div. And just as we typically do, we can just say display grid, grid-gap, whatever you wanna do. I said 1m, you could, of course, pick whatever you want.
>> Jen Kramer: And I added here also grid-template-columns,

[00:03:58]
>> Jen Kramer: Auto. And the reason I did that is because I'm gonna call out grid template columns in the media queries later, otherwise I would just not even declare it here, okay? Then inside of the media queries,
>> Jen Kramer: So in this first media query here. So here's what I did.

[00:04:18] We have a bunch of asides going on here. So there's a series of asides that are here, okay? There's also an aside over here on the outside. You could do funky things with, whatever, nth child or nth of type, and so forth, to select these. My sense was it would be simpler for a lot of people if I just declare a class here.

[00:04:41] So I'm gonna declare this last aside here that's on line 33 in my HTML. I'm gonna call that class of sidebar because I want its behavior to be very different than the asides that I'm working with inside of here.
>> Jen Kramer: And consequently, inside of my media queries where you see the side currently, I'm gonna change that to .side bar in both locations.

[00:05:13]
>> Jen Kramer: Otherwise what would happen is that the styles that are here for the aside, the generic HTML class would apply also to those asides that are going to be inside of the article and we don't want that. So, that was just a switch we had to make because we're adding this extra code.

[00:05:30] Now the actual new code that we're going to add is this, nested is my class inside of the media query, and I can then say grid-template-columns: repeat (3, 1fr), okay?
>> Jen Kramer: So does that make sense? Okay, and if we now take a look at our web page and refresh.

[00:06:08] There's our three asides all side by side, everything looks great. And when I crunch the page down,
>> Jen Kramer: At some point along the way, those will all stack and there they go, okay.
>> Jen Kramer: All right.
>> Jen Kramer: So just to refresh again, what we did was we declared div with a class of nested becomes our grid container.

[00:06:43] The asides there inside of that become our grid items, and that is then reflected inside of our CSS. So here's our nested is our grid container declared here outside of the media queries, and then inside the media queries we can declare exactly how we want those to display.

[00:07:03] In this case, at the larger screen sizes we'd like to have three columns of equal size. But mobile dimensions we are just gonna stack them on top of each other.