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>>Solution :
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:
A row is created for every separate string listed, and a column is created for each cell in the string. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.
So instead of
grid-template-areas: "nav" "content";
you need to use
grid-template-areas: "nav content";
* {
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>