CSS Grids and Flexbox for Responsive Web Design CSS Grids and Flexbox for Responsive Web Design

Grid-area Exercise Setup

Jen Kramer
Jen Kramer
Freelance Instructor

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 "Grid-area 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:

After explaining how to create page layouts with 'grid-template-area', Jen's challenge is to create the desktop layout with this new tool.

Get Unlimited Access Now

Transcript from the "Grid-area Exercise Setup" Lesson

[00:00:00]
>> Jen Kramer: I’m gonna show you again what this page looks like here at desktop dimensions, okay. So this is the way it looks at desktop dimensions. What I’d like for you to do in the final media query, which is actually already all spelled out with the correct syntax here.

[00:00:15] Take like two minutes, and what I'd like for you to do is use the grid template area's property to spell out this display, okay? At the desktop dimension. Go ahead and do that now. Erase what's there and put in grid template areas and spell out what that layout should look like.