Invalid drawings and a misspelt name
Both broken drawings compute to none: the whole declaration is dropped. The item asking for a missing area c isn't hidden; it lands in implicit tracks beyond the end of the explicit grid, below and to the right of everything else.
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
.ok "a b"
.l-shape none
.uneven none
typo item at x=250 y=70