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 "Flexbox and CSS Grid Exercise 1 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:

While a full example of the completed solution can be reviewed in the "/end" folder for this exercise, Jen does a high-level recap which includes adding the wrapping elements to the HTML. Then she uses CSS Grid syntax to rebuild the layout.

Get Unlimited Access Now

Transcript from the "Flexbox and CSS Grid Exercise 1 Solution" Lesson

>> Jen: How did the rest of you do? What tripped you up along the way? Anything in particular?
>> Speaker 2: For me it was hard to get rid of everything and then put it back together and think about. It would be easy maybe starting from the ground up.
>> Jen: Yeah, definitely, definitely.

>> Speaker 2: But it was hard to pull it out and push it back in.
>> Jen: Yeah, yeah, it's always hard rewriting code, especially when it's not your own. But unfortunately, it's something we get called on to do a lot, don't we? [LAUGH] Please fix this code that somebody else wrote.

[00:00:31] So I hear you on that. [COUGH] All right, so we'll go ahead and put up our answer here. So somebody pointed out over the break that I have been neglectful of my meta viewport tags. And I went back through the files for the last two days and realized there are a whole lot of files that are missing the meta viewport tag.

[00:00:54] So if that bothers you, I have added that back to the master files and I have put those up on GitHub for you. And in fact, let me get out of that folder all together,
>> Jen: So I don't write over my original. Okay, so the answers here then to the high in the sky history.

[00:01:22] I wound up doing a few things here. The thing that really threw me as I was working through this particular page actually was the nav bar. The rest of it I found fairly straightforward to recode. But the nav bar has that cute little scallop on the top that looks like pie crust, and I had a really hard time getting it to work with the HTML that I had.

[00:01:43] So I wound up adding a div that's basically an empty div, it just has the background image in it. So that sits right on top of the nav bar, I'll show you the CSS in a moment, and holds as a container for the pie crust. I didn't have to do that with the floats or the Flexbox, but I found with grid I did need to do it.

[00:02:03] And then the rest of it I think is pretty straight forward. I have a div with a class of content, I have my article. My asides down here, I grouped together in a div with a class of aside. And I think those are sort of the major changes that I had here in the HTML.

[00:02:21] Then in the CSS, as I mentioned, I added a couple of extra wrapping elements and they are in here. So we have the, let's see, there's that background image that I was telling you about for that nav bar. So it has a height of 12 pixels and it just has that scallop repeating in the x direction that sits nicely on top of the nav bar.

[00:02:46] And,
>> Jen: Here in the content outside of the media query I've added to that, it gave it that background color and a radius associated with it and some padding.
>> Jen: And then really all the magic happens more or less here in the grid system. So what I did here was I set a width on the wrapper of 97% with a max width of 767 pixels.

[00:03:18] And then in the content, that wound up being where my grid was. We also had the aside, was going to have the two columns inside of it, so that'll put the little boxes next to each other underneath. So the content and that right column wound up being two things that were placed inside of the grid.

[00:03:39] And then there was a nested grid in that aside over there so that we could put the two boxes underneath.
>> Jen: Okay, and then it changed around here too in the desktop display.
>> Jen: Does that sort of vaguely make sense?
>> Jen: There's a ton of code there. I just sorta hit the high points of what changed, but you do have the answers available to you there in the end folder, so you can take a look at things.