Challenge - Grid magazine

Build a magazine layout with grid-template-areas.

Magazine layout with grid-template-areas

For layouts with named regions like a magazine page, the most readable approach is grid-template-areas. The .page container gets display: grid; column and row sizes are set with grid-template-columns and grid-template-rows.

Then each cell gets a name: "header header header" "sidebar main main". Assigning grid-area: header to the .header element places it automatically. The layout reads visually in the code; reordering is just shifting names around.

Exercise Build the magazine template

Complete the CSS below. Give the .page container display: grid and a template with three equal columns (each 1fr). Define the top row as "header header header" and the bottom row as "sidebar main main". Place .header and .sidebar in their regions.

Show example solution

/* page container */
.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}

/* header */
.header {
  grid-area: header;
}

/* sidebar */
.sidebar {
  grid-area: sidebar;
}

Test yourself

What does grid-area: header do?
```
.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}
.header {
  grid-area: header;
}
```
- Places the element in the named region
- Resizes the region
- Adds a background color to the region
- Hides the region
Show answer

Places the element in the named region — Correct. grid-area: header places the element in the header region defined by the template.

Complete the grid-area declaration

.header {
  grid-area: ____;
}

Show answer

.header {
  grid-area: header;
}

Match each grid property to its role

grid-template-areas

Templates cells with names
grid-area

Places element in named region
grid-template-columns

Sets column widths
grid-template-rows

Sets row heights
display: grid

Makes container a grid

Next lesson: Challenge - Responsive navbar

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies