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