Home VS Code Live Server Extension not displaying background colors when using CSS Grid layout

Questions

VS Code Live Server Extension not displaying background colors when using CSS Grid layout

October 6, 2022

Edit: I accidentally made a typo when linking the stylesheet, that was the problem. Not sure if I should edit the title or leave as-is. Let me know if I should.

I was trying some sample code, using the Live Server extension on Visual Studio Code, and every time I click "Open with live server" text will load, but the point of the code was supposed to show the background colors of each section to learn how CSS grid works. It worked fine when using flex, but I have to learn grid for class and nothing is displaying correctly. I tried restarting, uninstalling and reinstalling the live server extension but nothing changed. I even deleted the code and replaced it with my teacher’s just in case, but only text shows up, not color. The browser I use is Firefox. My teacher did his on a lecture video, and his worked, so I’m not sure what’s wrong. I’m new here so I don’t know whether or not to include code, so I will include it just in case. Let me know if it needs to be removed.

HTML

<body>
  <main id="grid_container">
    <section class="red"></section>
    <section class="yellow"></section>
    <section class="blue"></section>
  </main>
</body>

CSS

.red{
    background: red;
}

.yellow{
    background: yellow;
}

.blue{
    background-color: blue;
}

#grid_container{
    display: grid;
    grid-template-columns: 10vw 60vw 30vw;
    grid-template-rows: 30vh;
}