Css - Why are my grid areas not displaying in the order I set them to within their container?

Ajna
February 22, 2024
165 views
0 votes
2 Answers

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.)

Full Codepen

* {
  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>

Tags: css

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:

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>

Your syntax is wrong for grid-template-areas. Your syntax is:

grid-template-areas: "nav" "content";

The correct syntax is:

grid-template-areas: "nav content";

A snippet to demonstrate:

* {
  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>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Why are my grid areas not displaying in the order I set them to within their container?

Answers