Describe a complete page layout in one rule.
What to build
A page with named areas and a self-adjusting card grid.
Requirements
.pageis a grid with columns180px 1frand agapof10px.- Its areas are, in order:
header header,menu content, andfooter footer. header,nav,mainandfooterare placed in the areasheader,menu,contentandfooter..cardsis a grid usingrepeat(auto-fit, minmax(150px, 1fr)).
Constraints
Do not use any media queries.
Example
The syntax in the lesson shows a two-row template.
Why it works
The template acts as a drawing of the page, so that the HTML can stay in a sensible reading order while the layout is described separately.
Hints
Hint 1
Each string is a row, and each name is a cell.
Hint 2
Each element then needs a grid-area.
Hint 3
auto-fit with minmax makes cards rearrange themselves.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>
<style>
.page {
display: grid;
grid-template-columns: 180px 1fr;
gap: 10px;
grid-template-areas:
"header header"
"menu content"
"footer footer";
}
header { grid-area: header; }
nav { grid-area: menu; }
main { grid-area: content; }
footer { grid-area: footer; }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
</style>
</head>
<body>
<div class="page">
<header>Header</header>
<nav>Menu</nav>
<main>
<div class="cards"><div>A</div><div>B</div><div>C</div></div>
</main>
<footer>Footer</footer>
</div>
</body>
</html>