html - 标题元素出现在内容下方

Question

我无法正确放置元素:

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

2- div 之间的垂直间距非常大

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

• 对齐元素
• justify-item
• self 对齐
• self 证明
• 边距
• 填充

我的代码:

.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 处理了，最后渲染它。