网络开发：Grid/Flex。它只在左上角显示一个框

Question

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 放入网格布局来完成我的页面布局。感谢任何帮助。

Answer 1

我已将侧面板拆分为 SidePanelLeft 和 SidePanelRight，以便网格模板区域知道放置它们的位置（网站检查员抱怨网格模板区域的值）。

还为 grid-template-rows 添加了另一个值，因为有三行，并且在解决了之前的问题后不显示页脚。

经过这两项更改后您的代码有效：

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>

网络开发：Grid/Flex。它只在左上角显示一个框

Web Dev: Grid/Flex. It is only displaying one box in the top left corner

html

grid

flexbox

web