CSS Grid布局未生效求助：其他样式正常但网格无效果

核心问题 #

• 容器类名不一致：CSS里定义的网格容器类是.gridcontainer，但HTML中<body>的类是grid-container（带短横线），导致display: grid等核心网格样式根本没被应用，这是布局失效的关键原因。
• 链接ID不匹配：CSS中用#link1到#link6定位链接，但HTML里链接的ID是a1到a6，所以这些链接的网格定位样式完全起不了作用。

修正后的代码 #

CSS代码 #

.grid-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px 30px 1fr 1fr 100px;
    gap: 15px;
    height: 100vh;
    margin: 0;
}
header{ 
    grid-column: 1 / 7;
    grid-row: 1;
}
a{ grid-row: 2 / 3; }
a#a1{ grid-column: 1 / 2; }
a#a2{ grid-column: 2 / 3; }
a#a3{ grid-column: 3 / 4; }
a#a4{ grid-column: 4 / 5; }
a#a5{ grid-column: 5 / 6; }
a#a6{ grid-column: 6 / 7; }
article#intro{
    grid-row: 2 / 4;
    grid-column: 1 / 3;
}
article#main{
    grid-row: 3 / 5;
    grid-column: 3 / 6;
}
aside{ grid-column: 6 / 7; }
aside#side1{ grid-row: 3 / 4; }
aside#side2{ grid-row: 4 / 5; }
footer{ grid-row: 5 / 6; }
footer#footer1{ grid-column: 1 / 3; }
footer#footer2{ grid-column: 3 / 5; }
footer#footer3{ grid-column: 5 / 7; }

HTML代码 #

<body class="grid-container">
    <header><h1>Page Header</h1></header>
    <a id="a1">Link 1</a>
    <a id="a2">Link 2</a>
    <a id="a3">Link 3</a>
    <a id="a4">Link 4</a>
    <a id="a5">Link 5</a>
    <a id="a6">Link 6</a>
    <article id="intro">Intro Article</article>
    <article id="main">Main Article</article>
    <aside id="side1">Side 1</aside>
    <aside id="side2">Side 2</aside>
    <footer id="footer1">Footer 1</footer>
    <footer id="footer2">Footer 2</footer>
    <footer id="footer3">Footer 3</footer>
</body>

补充说明 #

修正后网格容器样式会正确绑定到<body>，链接的网格定位也能正常生效。额外添加的height: 100vh和margin: 0是为了让容器占满整个视口高度，消除默认边距对布局的干扰，更直观展示网格效果。

内容的提问来源于stack exchange，提问作者DonielF