This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Nesting and Offsets Exercise Solution" Lesson
[00:00:00]
>> 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?
[00:01:13]
>> 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.