Goal
You’ll take the Grid skeleton from the previous lesson and make it genuinely responsive, combining Part 3’s mobile-first approach directly with Part 6’s actual named-area layout, rather than treating them as separate, unrelated skills.
Learn
Following mobile-first principles from Part 3.4, the base (unconditional) styles should describe the simplest, single-column mobile layout, with a min-width media query adding the full sidebar/content/footer structure only for larger screens:
.page {
display: grid;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.page {
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
} Notice the mobile base has no grid-template-columns defined at all — with a single column implied, each named area simply stacks in the order listed. The media query then introduces both the column structure and the rearranged area template together, since both need to change in sync for the larger-screen layout to make sense as a whole.
Decision Task
Notice that on mobile, “content” appears before “sidebar” in the template areas, but on the larger-screen version, they sit side by side instead, with sidebar physically first (left) and content second. Before reading on: why might a real design intentionally show content before sidebar on mobile, even though their side-by-side order later differs?
Reveal the Answer
On a narrow mobile screen, users typically want to reach the main content first, without needing to scroll past a sidebar (often secondary navigation or supplementary information) just to reach it. This is a genuine, deliberate design decision enabled directly by named grid areas: the same HTML markup order can render in a different visual order depending on screen size, without needing to duplicate or physically reorder the actual HTML elements in the document.
Common Mistake
Writing the responsive version as an entirely separate, disconnected set of rules under a completely different class name, rather than a media query building directly on the same base structure and class names. This leads to duplicated code across two versions of essentially the same layout, and makes it easy for the two versions to drift out of sync as the project changes over time, since a future update to one might not be reflected in the other.
Practice Questions
1. In the mobile base styles (no media query), why is grid-template-columns not defined at all?
Show Answer
Because with only one column implied by default, there’s nothing to define — each named area in the single-column template-areas list simply stacks in the listed order automatically.
2. Add a second breakpoint at 1200px where the sidebar grows to 300px wide, without changing the mobile or 768px behavior otherwise. Write the additional media query needed.
Show Answer
@media (min-width: 1200px) { .page { grid-template-columns: 300px 1fr; } }
3. Explain, referencing named grid areas specifically, how the same HTML order can produce a different visual order at different screen sizes.
Show Answer
Because grid-area assigns each element to a named region, and the template-areas string (which can differ between the base and the media query) determines where each named region actually sits visually — the underlying HTML markup order never needs to change, only which named position each region occupies in the current template.
4. True or False: the mobile-first base styles in this lesson’s example still technically use Grid, just with an implied single column.
Show Answer
True — display: grid is still set; there’s just no explicit column definition, so Grid defaults to a single implied column, with named areas stacking vertically.
5. Why does writing the responsive version as a media query building on the same class name (.page) reduce the risk of the two versions drifting out of sync, compared to two entirely separate class names?
Show Answer
Any future change to shared properties (like padding, or the header/footer styling) only needs to be made once, under one class name, rather than needing to be manually duplicated and kept in sync across two separate class definitions.
Try It Yourself
Using everything from this Part so far, would you say this responsive Grid approach uses more of Part 3’s media query skills, or Part 6 Lesson 2’s named-area skills, or genuinely both together?
Show Answer
genuinely both — this is the actual point of a capstone Part: combining separate skills learned individually into one real working solution, rather than testing them in isolation.
Quick Check
1. What should the unconditional base styles represent in a mobile-first responsive layout?
Show Answer
The simplest, single-column mobile layout.
2. How can the same HTML markup order render in a different visual order at different screen sizes?
Show Answer
By redefining grid-template-areas differently inside a media query.
3. Why is writing responsive styles as a media query on the same base structure better than a separate disconnected ruleset?
Show Answer
It avoids duplicated code and keeps both versions from drifting out of sync.
4. Using everything from this Part so far, would you say this responsive Grid approach uses more of Part 3’s media query skills, or Part 6 Lesson 2’s named-area skills, or genuinely both together?
Show Answer
genuinely both — this is the actual point of a capstone Part: combining separate skills learned individually into one real working solution, rather than testing them in isolation.
5. Notice that on mobile, “content” appears before “sidebar” in the template areas, but on the larger-screen version, they sit side by side instead, with sidebar physically first (left) and content second. Before reading on: why might a real design intentionally show content before sidebar on mobile, even though their side-by-side order later differs?
Show Answer
On a narrow mobile screen, users typically want to reach the main content first, without needing to scroll past a sidebar (often secondary navigation or supplementary information) just to reach it. This is a genuine, deliberate design decision enabled directly by named grid areas: the same HTML markup order can render in a different visual order depending on screen size, without needing to duplicate or physically reorder the actual HTML elements in the document.