.page { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } .site-header { grid-area: header; }Header and footer span two columns, while sidebar and content share the middle row.
LESSON 68 OF 100
Name the areas of a page
Describe a page with header, sidebar, content and footer visually.
STEP 1 · LEARN
How it works
grid-template-areas describes each row with a string of names, while grid-area assigns each item to its area. Visual order must not replace logical, accessible HTML source order.
.page { grid-template-areas: "header main" "footer"; }Area-template rows must have the same number of cells, and the container must activate Grid.
STEP 2 · APPLY
Your exercise
Define the three area rows and assign each element its matching name.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The page uses Grid.
- ○The template contains the three area rows.
- ○The header is assigned to the header area.
- ○The sidebar is assigned to the sidebar area.
- ○The content is assigned to the main area.
- ○The footer is assigned to the footer area.
- ○The target element is present in the page.
Explain the solution logic
The template names the cells, and each grid-area connects an existing semantic element to its matching area.