Heading elements appearing below content

Question

I can't position the items correctly:

1 - The titles "App name", "Title 1" and "Title 2" (h1 tags) are located below the cells and not above.

2- The vertical spaces between the div are very large

I tried "playing" using the properties in several elements:

• align-items
• justify-item
• align-self
• justify-self
• margin
• padding

My code:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "title1""title2""title3";
  background-color: crimson;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.title1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "title1-subtitle1 title1-subtitle2""title1-subtitle3 title1-subtitle4";
  grid-area: title1;
  background-color: yellow;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  width: 95%;
  align-items: center;
  justify-items: center;
  align-self: center;
  justify-self: center;
  margin: auto;
}

.title1>div {
  background-color: orange;
}

.title1 div>h2,
p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title1-subtitle1 {
  grid-area: title1-subtitle1;
}

.title1-subtitle2 {
  grid-area: title1-subtitle2;
}

.title1-subtitle3 {
  grid-area: title1-subtitle3;
}

.title1-subtitle4 {
  grid-area: title1-subtitle4;
}

.title2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "title2-subtitle1 title2-subtitle2";
  grid-area: title2;
  background-color: green;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  width: 95%;
  align-items: center;
  justify-items: center;
  align-self: center;
  justify-self: center;
  margin: auto;
}

.title2>div {
  background-color: lightblue;
}

.title2 div>h2,
p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title2-subtitle1 {
  grid-area: title2-subtitle1;
}

.title2-subtitle2 {
  grid-area: title2-subtitle2;
}

.title3 {
  grid-area: title3;
  background-color: violet;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  width: 95%;
  align-items: center;
  justify-items: center;
  align-self: center;
  justify-self: center;
  margin: auto;
}

.title3>h1,
p {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="grid-container">
  <h1>App name</h1>
  <div class="title1">
    <h1>Title 1</h1>
    <div class="title1-subtitle1">
      <h2>Title 1 - Subtitle 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
      </p>
    </div>
    <div class="title1-subtitle2">
      <h2>Title 1 - Subtitle 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae? Lorem ipsum, dolor
        sit amet consectetur adipisicing elit. Eaque, odit aspernatur ea dolores dicta nisi, unde ut dolorem omnis iste blanditiis saepe, dolorum rerum quos consequuntur temporibus veritatis voluptatum accusantium? Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quod qui, incidunt voluptas aperiam corrupti molestiae aut nostrum voluptatem ratione totam dicta, distinctio expedita quaerat magni repellendus aliquid, animi sapiente quo.
      </p>
    </div>
    <div class="title1-subtitle3">
      <h2>Title 1 - Subtitle 3</h2>
      <p>Lorem
      </p>
    </div>
    <div class="title1-subtitle4">
      <h2>Title 1 - Subtitle 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
      </p>
    </div>
  </div>
  <div class="title2">
    <h1>Title 2</h1>
    <div class="title2-subtitle1">
      <h2>Title 2 - Subtitle 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
      </p>
    </div>
    <div class="title2-subtitle2">
      <h2>Title 2 - Subtitle 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, nihil ducimus pariatur dolore voluptas repellendus et sed, debitis sit tempore nam blanditiis, accusantium aliquam iusto inventore officia aperiam quos repudiandae?
      </p>
    </div>
  </div>
  <div class="title3">
    <h1>Title 3</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A velit in aperiam, expedita nesciunt nemo ea pariatur explicabo laudantium quasi commodi sed laboriosam obcaecati, libero nobis voluptas? Aliquam, possimus. Nemo.
    </p>
  </div>
</div>

This is how I want it to look like:

Answer 1

The main problem with your title placement was that you didn't define a grid-area name for them, and then list it in grid-template-areas.

Once in a grid container, a heading (h1, h2, etc.) is just another grid item.

Because it was being ignored by grid-template-areas it was handled by the grid auto-placement algorithm, which was rendering it last.