我有一个HTML文件，如：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css"/>
</head>
<$>
<div id="homepage">
<header>
<nav class="menubar">
<ul class="menu">
<li><a href="about.html">About</a></li>
<li><a href="famous.html">Famous Cats</a></li>
<li><a href="lolcats.html">LOLCats</a></li>
</ul>
</nav>
</header>
<nav class="local-menu">
<ul>
<li><a href="stuff.html">Stuff</a></li>
<li><a href="other.html">Other stuff</a></li>
<li><a href="clickbait.html">Stuff that will really surprise you!</a></li>
</ul>
</nav>
<main>
<p>Stretch out on bed claw drapes. Find a way to fit in tiny box poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree. I hate cucumber pls dont throw it at me white cat sleeps on a black shirt. Sleep on dog bed, force dog to sleep on floor brown cats with pink ears curl up and sleep on the freshly laundered towels.</p>
<p>Find a way to fit in tiny box. Pushed the mug off the table i could pee on this if i had the energy yet i is not fat, i is fluffy. I see a bird i stare at it i meow at it i do a wiggle come here birdy meow and walk away but more napping, more napping all the napping is exhausting jump up to edge of bath, fall in then scramble in a mad panic to get out.</p>
<p>Swipe at owner's legs cat dog hate mouse eat string barf pillow no baths hate everything. Cough hairball, eat toilet paper where is it? i saw that bird i need to bring it home to mommy squirrel! fall over dead (not really but gets sypathy) or wack the mini furry mouse. Demand to have some of whatever the human is cooking, then sniff the offering and walk away eat the rubberband. That box? i can fit in that box.</p>
</main>
<footer>
We really don't care about your privacy, see our <a href="privacy.html">Privacy Policy</a>
</footer>
</div>
</body>
</html>
我是CSS的新手，我尝试过这样的布局：正确布局
然而，如果我做与id相关联的网格模板区域，它会起作用，比如：
#homepage {
margin: 0;
display: grid;
grid-template-areas:
"header header"
"localmenu main"
"footer footer";
}
header{
grid-area: header;
}
....
如果我使用带有正文的网格模板区域，它会失败，比如：
body {
margin: 0;
display: grid;
grid-template-areas:
"header header"
"localmenu main"
"footer footer";
}
header{
grid-area: header;
}
我搞不清里面的原因，有人能告诉我吗？非常感谢！
即使使用网格模板区域，也应该添加网格模板列。因为，它描述了有多少网格。下面的示例代码：
body{grid-template-columns:200px 1fr;}
#homepage {
margin: 0;
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas: "header header" "localmenu main" "footer footer";
}
header {
grid-area: header;
background: #DDA0DD;
}
nav {
grid-area: localmenu;
}
main {
grid-area: main;
background: #FEC0CB;
}
footer {
grid-area: footer;
background: #DDA0DD;
display: block;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="homepage">
<header>
<nav class="menubar">
<ul class="menu">
<li><a href="about.html">About</a></li>
<li><a href="famous.html">Famous Cats</a></li>
<li><a href="lolcats.html">LOLCats</a></li>
</ul>
</nav>
</header>
<nav class="local-menu">
<ul>
<li><a href="stuff.html">Stuff</a></li>
<li><a href="other.html">Other stuff</a></li>
<li><a href="clickbait.html">Stuff that will really surprise you!</a></li>
</ul>
</nav>
<main>
<p>Stretch out on bed claw drapes. Find a way to fit in tiny box poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree. I hate cucumber
pls dont throw it at me white cat sleeps on a black shirt. Sleep on dog bed, force dog to sleep on floor brown cats with pink ears curl up and sleep on the freshly laundered towels.</p>
<p>Find a way to fit in tiny box. Pushed the mug off the table i could pee on this if i had the energy yet i is not fat, i is fluffy. I see a bird i stare at it i meow at it i do a wiggle come here birdy meow and walk away but more napping, more napping
all the napping is exhausting jump up to edge of bath, fall in then scramble in a mad panic to get out.</p>
<p>Swipe at owner's legs cat dog hate mouse eat string barf pillow no baths hate everything. Cough hairball, eat toilet paper where is it? i saw that bird i need to bring it home to mommy squirrel! fall over dead (not really but gets sypathy) or wack
the mini furry mouse. Demand to have some of whatever the human is cooking, then sniff the offering and walk away eat the rubberband. That box? i can fit in that box.</p>
</main>
<footer>
We really don't care about your privacy, see our <a href="privacy.html">Privacy Policy</a>
</footer>
</div>
</body>
</html>