我正在尝试练习CSS网格。CSS文档中还有其他格式，这些格式都得到了正确应用。然而，没有一个网格被应用，我不知道为什么。
.gridcontainer{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 50px 30px 1fr 1fr 100px;
gap: 15px;
}
header{
grid-column: 1 / 7;
grid-row: 1;
}
a{ grid-row: 2 / 3; }
a#link1{ grid-column: 1 / 2; }
a#link2{ grid-column: 2 / 3; }
a#link3{ grid-column: 3 / 4; }
a#link4{ grid-column: 4 / 5; }
a#link5{ grid-column: 5 / 6; }
a#link6{ 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; }<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>在CSS中，目标是gridcontainer而不是grid-container
将.gridcontainer更改为.grid-container可修复此问题。
您有一个打字错误。在Html中，你写了一个类"网格容器"；但是在css中你写了"。网格容器"；将css中的类编辑为
.grid-container {
display: grid
}