css · level 2 · unit 3 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
draws the layout in words.
grid-template-areas lets you draw the layout. Each string in quotes is one row, and each word in it names one cell. Repeat a word to stretch that over several cells.
Then give each child grid-area with one of the names, and it drops into place. A . in the drawing marks a cell left empty.
Every row needs the same number of cells, and every area must be a rectangle. Break either rule and the browser skips the whole drawing.
<div class="page">
<div class="top">Header</div>
<div class="menu">Menu</div>
<div class="main">Today's recipe</div>
</div>.page {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas: "head head" "side main";
}
.top {
grid-area: head;
}
.menu {
grid-area: side;
}
.main {
grid-area: main;
}Press show my page to see it here.
Swap the drawing to "head head" "main side" and the menu jumps to the right.
guess first
One name repeated down a column. What happens?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<div class="page">
<div class="menu">Menu</div>
<div class="main">Main</div>
<div class="foot">Footer</div>
</div>.page {
display: grid;
grid-template-columns: 100px 1fr;
grid-template-areas: "side main" "side foot";
gap: 8px;
}
.menu {
grid-area: side;
background-color: lightblue;
}your turn
Your turn. Draw a recipe card.
Fill in the second row of the drawing so the photo sits on the left and the steps on the right, under the full-width title.
the page you’re styling
<div class="recipe">
<h2 class="name">Pancakes</h2>
<img class="photo" src="cake.svg" alt="A stack of pancakes">
<p class="steps">Mix, rest, fry, flip, eat.</p>
</div>your css
Press show my page to see it here.
- the photo and steps share row twonot checked yet
fix it
The layout fell apart. Debug it!
the page you’re styling
<div class="page">
<div class="top">Header</div>
<div class="menu">Menu</div>
<div class="main">Articles</div>
</div>your css
Press show my page to see it here.
- the drawing has two full rowsnot checked yet
- The browser skipped the whole drawing. Count the cells in each row.
- Every row in
grid-template-areasneeds the same number of cells. - Add
mainto the second row so it reads"side main", then press run.
nailed it
you drew a layout in words. :D
- Each string in
grid-template-areasis one row of names. grid-areadrops a child into a named area.- Every row needs the same number of cells.
new words in your collection
- grid-template-areas
- grid area
This lesson isn’t saved. A free account remembers every lesson you finish.