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 and Offsets Exercise Solution" 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:

Jen’s shows the solution to this exercise which uses ‘grid-template-columns’, ‘grid-template-areas’, and the ‘fr’ and ‘…’ syntax. Then she answers a question on using an approach that switches from ‘grid’ display to ‘block’ display for mobile vs. desktop resolutions.

Get Unlimited Access Now

Transcript from the "Nesting and Offsets Exercise Solution" Lesson

>> Jen Kramer: So, here's what I did in my CSS. I went ahead, and in my offsets document I declared nested once again, with a grid display of grid tablet columns of auto. Grid gap of 1m. And then in my media query, I wanna a heading declared, my grid template columns to repeat, all right?

[00:00:24] So three fractions. And then my grid template areas, just aside1...aside3.
>> Jen Kramer: It's pretty much you all needed to do there, okay? And of course, you have to name those. And you could have put in another class name those grid areas. I use first and last child, because it was super convenient.

[00:00:49] They are the first and last child, but you could've created classes for those asides, and then called them something else. That would've been alright, also.
>> Jen Kramer: Yes?
>> Speaker 2: Since we want these layouts to stack on smaller screen sizes anyway, couldn't we just do a display block and then switch to display grid when we're ready for the layout to be different?

>> Jen Kramer: Absolutely, yes, you can totally do that. And in fact, I did that with the Mandarin painting. I had it display block at both the dimensions and then display grid at mobile and desktop dimensions. So yes, that's another approach that you could take.