出现在内容下方的标题元素

Question

我无法正确放置物品：

1 - 标题“App name”、“Title 1”和“Title 2”（h1 标签）位于单元格下方而不是上方。

2-div之间的垂直间距很大

我尝试使用几个元素中的属性“玩”：

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

我的代码：

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

这就是我想要的样子：

Answer 1

标题放置的主要问题是您没有为它们定义grid-area 名称，然后将其列在grid-template-areas 中。

在网格容器中，标题（h1、h2 等）只是另一个网格项。

因为它被grid-template-areas 忽略了，所以它由最后渲染它的grid auto-placement algorithm 处理。

Answer 2

将<h1>Title 1</h1> 移出 div 元素怎么样？在你使用的时候，把你的代码上传到 jsfiddle 什么的，非常方便