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 "Practical Application 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 discusses her approach to the solution and discusses the possibility of using the ‘grid-row’ vs. the ‘order’ properties.

Get Unlimited Access Now

Transcript from the "Practical Application Exercise Solution" Lesson

>> Jen Kramer: There is probably several solutions to this particular issue. You're more than welcome to do something different. If it works, then that's the ultimate arbitrator as to whether something is good or not. I tend towards the more efficient solution, but you can do what you want. If it works, it works.

[00:00:18] Hopefully you got most of those classes and numbers pretty easily. If you didn't, please ask a question in the chat, or of course, if you're here in the classroom, ask a question. But down here when we get to the last row, which is all of the R5 classes, what I wound up having to do here was talk about what row things were on.

[00:00:40] And this is what helps me in the desktop versus the mobile layouts here. So I added to this a grid row of five, six for the desktop and that helped with the reordering. When we go back up to the mobile, sort of the tablet's media query here. Notice that I have the first and last columns are on the very last row, row eight, nine and the middle item is on row seven, eight.

[00:01:15] Make sense? Okay, so I'm having to dictate things in that row dimension in addition to the column dimension. And then up here in mobile I don't think I actually have much of anything going on. I haven't said where anything is supposed to display and that seems to be working in mobile.

[00:01:34] All right, so how did things work out for you? Good? Everything all right? Any comments?
>> Speaker 2: I used nth-child selectors-
>> Jen Kramer: Sweet.
>> Speaker 2: Instead of, the RCC3 kinda breaks down when you're on various form factors-
>> Jen Kramer: It is true.
>> Speaker 2: At various widths.
>> Jen Kramer: Yeah.
>> Speaker 2: So.
>> Jen Kramer: Yeah, so you were using nth-child as your selector instead.

>> Speaker 2: Yeah, and then I have a question-
>> Jen Kramer: That's great.
>> Speaker 2: About
>> Speaker 2: About the use of the grid row, versus the order property.
>> Jen Kramer: Yeah, yeah.
>> Speaker 2: Do you prefer one over the other? Is-
>> Jen Kramer: Yeah, so order is also an option. And sort of leads into one of the other things I was going to mention here.

[00:02:17] If you were with me yesterday, you remember I gave you a cheat sheet on FlexBox. Those of you who are here in the classroom with me have a printout of this. If you're online, if you go into your Chapter Eight folder, there's a file in there called gridproperties.txt.

[00:02:31] And it is a cheat sheet of many of these grid properties, which some people have alluded to today that I haven't necessarily said anything about to this point in time. So the question here has to do with order. Which is I think was the one that I wound up not putting on the sheet.

[00:02:47] But order, basically is, works like the FlexBox order property in that we can reorder our grid cells in space. But, If you're doing something complicated like completely moving them around from one location to another, I think you're gonna find that the order property doesn't necessarily do it. By default, all of the boxes have an order value of one, if I remember correctly, or zero, yeah.

[00:03:15] But it's all the same. So as soon as you assign an order number, then that particular item, grid item, will move to the end, whatever the end is. And so my sense is that it may work well if you're doing a simple movement, like just on a row or just on a column.

[00:03:36] But it's probably, I think it might cause more confusion. At least, certainly at this point, as we're just learning grid. But there's nothing wrong with it. It's a thing.
>> Speaker 2: Okay, perfect.
>> Jen Kramer: It's a thing, it's a legitimate thing.
>> Speaker 2: Thank you.