Question posted in 
I can’t understand why grid-template-areas within my container div isn’t working and isn’t aligning the nav element to the left and the main to the right.
I tested all of the elements with background colors and they’re all responding to those attributes but won’t align properly.
(Won’t let me post without adding more details. No clue what else I’m supposed to add here so here’s a useless run on sentence.)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
padding-left: 40px;
}
code {
padding-left: 10px;
}
.container {
display: grid;
grid-template-areas: "nav" "content";
}
#navbar {
grid-area: nav;
}
#main-doc {
grid-area: content;
}<div class="container">
<nav id="navbar">
<header>Project</header>
<a href="#1" class="nav-link">1</a>
<a href="#2" class="nav-link">2</a>
</nav>
<main id="main-doc">
<section class="main-section" id="1">
<header id="One">
<h1>1</h1>
</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nemo distinctio deserunt voluptatum delectus aliquam quod sequi eligendi, corporis expedita cumque et blanditiis quis numquam sint voluptate voluptas quia. Aliquam rerum tenetur quas dolore,
veritatis labore officia voluptate deserunt voluptatum maiores consectetur eos nisi sunt voluptas autem quis dolorum asperiores iusto doloremque ipsum beatae? Sequi, sapiente nihil. Maiores maxime libero ad. Deserunt, molestiae deleniti voluptas
odio nam commodi dolorum esse ratione! Quidem enim, eum blanditiis ex ut ducimus illo ratione, eligendi, eius impedit mollitia quo nam libero omnis excepturi ipsa laborum incidunt qui placeat! Porro voluptates quam natus modi soluta.
</p>
<p>
Recusandae rerum laudantium molestiae iure natus, porro excepturi ipsa, ipsum autem doloribus veniam illum, libero delectus tempore voluptates nisi ea nihil. Provident harum dolores fugit similique voluptates fugiat optio ex porro aut doloremque exercitationem
rerum, officia aliquid consequatur, voluptatibus sequi qui. Facilis quo eum quae sapiente aliquam aliquid id ab fugit maxime ex autem eos nemo atque laboriosam suscipit voluptatibus ullam nam, illo repudiandae iusto eveniet? Inventore vero quia
quas harum tenetur sed numquam est libero, fugit error veritatis quae culpa sequi facilis voluptas, magni ullam quibusdam praesentium necessitatibus omnis! Ab expedita eligendi minus sint, aperiam eveniet debitis qui pariatur?
</p>
<code>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, ad?
</code>
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Cum, deleniti deserunt.</li>
</ul>
</section>
<section class="main-section" id="2">
<header id="Two">
<h1>2</h1>
</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nemo distinctio deserunt voluptatum delectus aliquam quod sequi eligendi, corporis expedita cumque et blanditiis quis numquam sint voluptate voluptas quia. Aliquam rerum tenetur quas dolore,
veritatis labore officia voluptate deserunt voluptatum maiores consectetur eos nisi sunt voluptas autem quis dolorum asperiores iusto doloremque ipsum beatae? Sequi, sapiente nihil. Maiores maxime libero ad. Deserunt, molestiae deleniti voluptas
odio nam commodi dolorum esse ratione! Quidem enim, eum blanditiis ex ut ducimus illo ratione, eligendi, eius impedit mollitia quo nam libero omnis excepturi ipsa laborum incidunt qui placeat! Porro voluptates quam natus modi soluta.
</p>
<p>
Recusandae rerum laudantium molestiae iure natus, porro excepturi ipsa, ipsum autem doloribus veniam illum, libero delectus tempore voluptates nisi ea nihil. Provident harum dolores fugit similique voluptates fugiat optio ex porro aut doloremque exercitationem
rerum, officia aliquid consequatur, voluptatibus sequi qui. Facilis quo eum quae sapiente aliquam aliquid id ab fugit maxime ex autem eos nemo atque laboriosam suscipit voluptatibus ullam nam, illo repudiandae iusto eveniet? Inventore vero quia
quas harum tenetur sed numquam est libero, fugit error veritatis quae culpa sequi facilis voluptas, magni ullam quibusdam praesentium necessitatibus omnis! Ab expedita eligendi minus sint, aperiam eveniet debitis qui pariatur?
</p>
<code>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore,
numquam.
</code>
<ul>
<li>Lorem.</li>
<li>Iste.</li>
<li>Ipsam.</li>
<li>Nulla.</li>
<li>Nisi.</li>
</ul>
</section>
</main>
</div>
2
Answers
One string constitutes a row in the grid, multiple strings mean multiple rows. Therefore you need to have both the areas is a single string separated by a space.
From the MDN documentation of
grid-template-areas:So instead of
you need to use
Your syntax is wrong for grid-template-areas. Your syntax is:
The correct syntax is:
A snippet to demonstrate: