CSS grids not displaying properly-CodePudding

I'm using VS Code for some practice and grids aren't displaying in the dev tools.

Here's an example of what I have so far:

#navBar {
  display: grid;
  grid-template-columns: 50px 25px 400px 200px 50px;
  grid-template-rows: 10px 25px 10px;
}

<div id="navBar">
  <img  src="../assets../images/logo.svg">

  <div id="navLinks">
    <a href="#">Home</a>
    <a href="#">New</a>
    <a href="#">Popular</a>
    <a href="#">Trending</a>
    <a href="#">Categories</a>
  </div>
</div>

CodePudding user response：

You were referring the wrong id navLinks instead of navBar or vice-versa in the CSS or HTML. Here is with the correct id. you still need to change to the correct size.

#navBar {
  display: grid;
  grid-template-columns: 50px 25px 400px 200px 50px;
  grid-template-rows: 10px 25px 10px;
}

<div id="navBar">
  <img  src="../assets../images/logo.svg">
  <div id="navBar">
    <a href="#">Home</a>
    <a href="#">New</a>
    <a href="#">Popular</a>
    <a href="#">Trending</a>
    <a href="#">Categories</a>
  </div>
</div>

CodePudding user response：

    grid-template-columns: 50px 25px 400px 200px 50px;
    grid-template-rows: 10px 25px 10px;
    display: table-caption;
}

You can use display:table-caption

CodePudding user response：

Oh Christ, I'm so exhausted I didn't even notice that I didn't link the CSS file. Sorry everyone.