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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…