body{
background-color:#3D3D3D;
padding:0;
margin:0;
}
.NavBar{
height:3em;
display:flex;
flex-direction: row;
justify-content: flex-end;
background-color:#222222;
border:black solid 1px;
}
.NavBar a{
text-decoration: none;
font-size: 1.2em;
color: white;
margin: 0.8% 1% 0.8% 1%;
display: inline;
}
.container{
display:grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 200px 600px 1fr;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"sp ct ct ct ct ct ct sp"
"ft ft ft ft ft ft ft ft";
}
#HeaderBox{
grid-area: hd;
}
#ContentBox{
grid-area: ct;
}
#SidePanel{
grid-area: sp;
}
#FooterBox{
grid-area: ft;
background-color:#222222;
border:black solid 1px;
}
.box{
display:flex;
align-items: center;
justify-content: center;
border:black solid 1px;
}<!DOCTYPE html>
<html>
<head>
<title>JG</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="NavBar">
<a href="">Home</a>
<a href="">About Me</a>
<a href="">Blog</a>
</div>
<div class="container">
<div class="box" id="HeaderBox"><h1>Savage Boxers Of My Generation</h1></div>
<div class="box" id="ContentBox"></div>
<div class="box" id="SidePanel"></div>
<div class="box" id="FooterBox"></div>
</div>
</body>
</html>页脚位于网页右下角附近的某个位置(从屏幕中心附近开始延伸到屏幕外。没有显示任何内容，尽管我希望看到每个框周围都有黑色边框，但我也尝试过将颜色更改为白色，以防我错过了它。
我正在遵循一个关于Udacity的教程，似乎找不到问题。我有身份证试图通过将ID放入网格布局来完成页面的布局。感谢您的帮助。
我已经将侧面板拆分为SidePanelLeft和SidePanelRight，以便网格模板区域知道将它们放置在哪里(网站检查员抱怨网格模板区域的价值(。
还为网格模板行添加了另一个值，因为有三行，并且在解决之前的问题后没有显示页脚。
在这两次更改之后，您的代码可以工作：
body{
background-color:#3D3D3D;
padding:0;
margin:0;
}
.NavBar{
height:3em;
display:flex;
flex-direction: row;
justify-content: flex-end;
background-color:#222222;
border:black solid 1px;
}
.NavBar a{
text-decoration: none;
font-size: 1.2em;
color: white;
margin: 0.8% 1% 0.8% 1%;
display: inline;
}
.container{
display:grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: 200px 600px 200px 1fr;
grid-template-areas:
"hd hd hd hd hd hd hd hd"
"spl ct ct ct ct ct ct spr"
"ft ft ft ft ft ft ft ft";
}
#HeaderBox{
grid-area: hd;
}
#ContentBox{
grid-area: ct;
}
#SidePanelLeft{
grid-area: spl;
}
#SidePanelRight{
grid-area: spr;
}
#FooterBox{
grid-area: ft;
background-color:#222222;
border:black solid 1px;
}
.box{
display:flex;
align-items: center;
justify-content: center;
border:black solid 1px;
}<!DOCTYPE html>
<html>
<head>
<title>JG</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="NavBar">
<a href="">Home</a>
<a href="">About Me</a>
<a href="">Blog</a>
</div>
<div class="container">
<div class="box" id="HeaderBox"><h1>Savage Boxers Of My Generation</h1></div>
<div class="box" id="SidePanelLeft"></div>
<div class="box" id="ContentBox"></div>
<div class="box" id="SidePanelRight"></div>
<div class="box" id="FooterBox"></div>
</div>
</body>
</html>