javascript - CSS grid is being ignored

Question

Welcome To Ask or Share your Answers For Others

javascript - CSS grid is being ignored

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - CSS grid is being ignored

Hi I'm still relatively new to HTML and CSS at just a few weeks of practice and I had some success using grids on previous projects but am now stuck as it appears when I try to use grid: display; it is currently being ignored.

#container{
  display: grid;
  grid-template-areas:
    "navbar content";
  grid-auto-flow: column;
  grid-template-columns: 1fr 3fr;
  justify-content: center;
}
#main-doc{
 
}
#main-title{
  grid-area: content;
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
}
}
#navtitle{
  grid-area: navbar;
  
}

<body>
  <main id="main-doc">
    <div id="container">
    <h1 id="main-title">main doc</h1>
    <nav id="navtitle">Title</nav>
    </div>
  </main>
  

</body>

question from:https://stackoverflow.com/questions/65642589/css-grid-is-being-ignored

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T18:46:37+0000

By removing the grid-column-start and grid-column-end from the #main-title, you can achieve the desired result:

#container{
  display: grid;
  grid-template-areas:
    "navbar content";
  grid-auto-flow: column;
  grid-template-columns: 1fr 3fr;
  justify-content: center;
}
#main-title{
  grid-area: content;
  background-color: gray;
}
#navtitle{
  grid-area: navbar;
}

<body>
  <main id="main-doc">
    <div id="container">
      <h1 id="main-title">main doc</h1>
      <nav id="navtitle">Title</nav>
    </div>
  </main>
</body>

Categories

javascript - CSS grid is being ignored

javascript - CSS grid is being ignored

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags