Goal

You’ll build the actual Grid skeleton for the header/sidebar/content/footer layout planned in the previous lesson, using named grid areas for genuine readability rather than guessing at row and column numbers.

Learn

CSS Grid supports named template areas, a genuinely readable way to define a whole page layout that reads almost like a visual diagram directly in your CSS:

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

This reads almost exactly like a diagram of the actual layout: header spans both columns (written twice, side by side, in the template), footer spans both columns the same way, and sidebar/content sit in their own separate columns between them, on the middle row.

Decision Task

Using the code above, if you wanted the sidebar to be 280px instead of 240px, which single value would you change, and would anything else need to change to keep the layout correct?

Reveal the Answer

Just grid-template-columns: 280px 1fr; — the first value directly controls the sidebar’s width. Nothing else needs to change; 1fr automatically absorbs whatever space remains for the content area, which is exactly the point of using a flexible fraction unit (from Part 3.1) instead of a second fixed pixel value that would need manual recalculation.

Common Mistake

Forgetting to set grid-area on each individual child element after defining grid-template-areas on the parent container. Without that explicit connection on each child, the named areas exist correctly in the template definition, but nothing actually tells the browser which specific element belongs in which named region, so elements end up placed automatically in default positions instead, ignoring the named template entirely.

Practice Questions

1. Rewrite the grid-template-areas so the sidebar appears on the right side instead of the left, with content on the left.

Show Answer

grid-template-areas: “header header” “content sidebar” “footer footer”; (and swap the column order in grid-template-columns to 1fr 240px).

2. Why does writing “header” twice, side by side, in the template-areas string make it span both columns?

Show Answer

Because each word in the string represents one column’s content for that row; writing the same name in both column positions tells Grid that one single area occupies both columns, spanning across them.

3. A developer defines grid-template-areas correctly, but the layout still looks wrong, with all elements stacked in default positions. What’s the most likely missing piece, based on this lesson?

Show Answer

The grid-area declarations are missing on the individual child elements — without them, nothing connects each element to its named region in the template.

4. True or False: grid-template-columns and grid-template-areas must always be defined together for a named-area layout to work correctly.

Show Answer

True, practically speaking — grid-template-columns defines the column widths the named areas are built on top of; without it, the areas have no defined column structure to actually occupy.

5. Add a new area called “ad-banner” between the header and the main sidebar/content row, spanning the full width, and write the updated grid-template-areas string.

Show Answer

grid-template-areas: “header header” “ad-banner ad-banner” “sidebar content” “footer footer”;

Try It Yourself

You want the sidebar to disappear entirely on small screens, with content taking the full width instead. Which lesson from Part 3 would you combine with this Grid structure to achieve that?

Show Answer

a media query (with min-width, mobile-first) that redefines grid-template-columns and grid-template-areas for larger screens only, keeping a simple single-column layout as the mobile-first base.

Quick Check

1. What does grid-template-areas let you define in a readable way?

Show Answer

The overall shape of a page layout, using named regions.

2. What property connects an actual element to a named grid area?

Show Answer

grid-area.

3. Why does 1fr for the content column mean you don’t need to calculate its exact width?

Show Answer

It automatically takes up whatever space remains after the fixed-width columns are accounted for.

4. You want the sidebar to disappear entirely on small screens, with content taking the full width instead. Which lesson from Part 3 would you combine with this Grid structure to achieve that?

Show Answer

a media query (with min-width, mobile-first) that redefines grid-template-columns and grid-template-areas for larger screens only, keeping a simple single-column layout as the mobile-first base.

5. Using the code above, if you wanted the sidebar to be 280px instead of 240px, which single value would you change, and would anything else need to change to keep the layout correct?

Show Answer

Just grid-template-columns: 280px 1fr; — the first value directly controls the sidebar’s width. Nothing else needs to change; 1fr automatically absorbs whatever space remains for the content area, which is exactly the point of using a flexible fraction unit (from Part 3.1) instead of a second fixed pixel value that would need manual recalculation.