CSS Grid Troubleshooting-CodePudding

I'm attempting to practice CSS grids. There's other formatting in the CSS document, which is all being applied properly. However, none of the grids are being applied, and I can't figure out why.

.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 >
    <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>

CodePudding user response：

In your CSS, you are targeting gridcontainer instead of grid-container

Changing .gridcontainer to .grid-container fixes the issue.

CodePudding user response：

You have a typo. In Html you wrote a class "grid-container" but in css you wrote ".gridcontainer" edit the class in css to

.grid-container {
   display: grid
}