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 Setup" 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 sets up an exercise that combines the nesting and offset concepts and answers a question about how the syntax around repeat and ‘fr’ works in the ‘grid-template-columns’ declaration.

Get Unlimited Access Now

Transcript from the "Nesting and Offsets Exercise Setup" Lesson

>> Jen Kramer: Chapter 14 is the grid offsets, I've actually already told you about this so here is what I'd like you to do with the grid offsets. Go on ahead and open offset.html and offset.css, and what I'd like for you to do is, I'd like for you to just make the page display in the following way.

>> Jen Kramer: Okay, so I'd like you to take those asides that you just had. You're gonna get rid of the one that's in the middle here and I want you to have one on this side, one on that side, okay? Does that make sense? Okay, and the HTML that you're starting with just so you know what it looks like,

>> Jen Kramer: It looks like that.
>> Jen Kramer: Okay? So take the page that looks like that, make it look like this give you like 10 minutes, is that good? All right 10 minutes.
>> Student: Quick actually one question is popping here.
>> Jen Kramer: Sure.
>> Student: When you hear by in grid template columns, what precisely is repeat, repeating and repeat for ,1fr?

>> Jen Kramer: Sure. So let me pull up the code that he's talking about here. There we go. Okay, so here, this is the nesting.css document that we were just working with, I'm on line number 47. And so he's asking what this syntax means? Repeat, 3,1fr, so what we're indicating here is that we would like 3 columns, and each column would be 1 fraction each.

[00:01:43] So this is essentially, this 3fr is the same thing,
>> Jen Kramer: As if I said this, 1fr, 1fr, 1fr. Those are syntactically different but they function exactly the same.