A page layout drawn with areas
The computed value prints the drawing back as strings. Each item filled the rectangle its name covers: the header and footer are the full 400px wide.
grid-template-areas lets you draw a layout as text, one quoted string per row and one name per cell; each item then joins its area with grid-area: name, and changing the drawing in a media query rearranges the whole page.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw a dashboard: a header across the top; below it a narrow menu on the left and two equal panels side by side on the right; no footer.
Write a grid-template shorthand for a 2-column layout with rows header (60px), side main (1fr) and foot foot (40px), and columns 180px 1fr.
A card has an image, a title and text. Use areas so the image is on the left spanning both rows, the title top-right and the text bottom-right.
Explain it without notes
How does grid-template-areas work, and how does an item join an area?
What makes a grid-template-areas value invalid, and what happens then?
How would you make a layout that is one column on phones and has a sidebar on desktops, using areas?
What named lines does an area create, and how can you use them?
Preview
Console
Nothing logged yet.Expected console output
"header header" "sidebar main" "footer footer"
header x=0 y=0 400x40
nav x=0 y=48 100x100
main x=108 y=48 292x100
footer x=0 y=156 400x30