css - 如何在 CSS 中修复此网格？

Question

我正在尝试为我的网站做一个简单的网格。我几乎可以成功地做我想做的事。我想修复作为该网格标题的“项目”，我希望它的大小与网格的其他部分不同。

这是我得到的结果：

我想要这样的东西：

HTML：

<div class="project-container">
      <div className="title">
        <h1>PROJECTS</h1>
      </div>
      <div className="project-one item">
        <h2>Face Recognition</h2>
        <button className="button button1">VIEW PROJECT</button>
      </div>
      <div className="project-two item">
        <h2>Face Recognition</h2>
        <button className="button button1">VIEW PROJECT</button>
      </div>
      <div className="project-three item">
        <h2>Face Recognition</h2>
        <button className="button button1">VIEW PROJECT</button>
      </div>
    </div>

CSS：

.project-container {
  width: 80%;
  height: 80vh;
  margin: auto;
  display: grid;
  border: 1px solid pink;
  // grid-gap: 4em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "t t t"
    "p1 p2 p3";
}

.item {
  // width: 100%;
  // height: 100%;
  // transition: all 0.2s ease-in-out;
  text-align: center;
  color: white;
  border: 1px solid pink;
}

.title {
  grid-area: t;
  text-align: center;
  border: 1px solid pink;
  // height: 10vh;
}

标签： csscss-grid

Answer 1

利用grid-template-rows

.project-container {
  width: 80%;
  height: 80vh;
  margin: auto;
  display: grid;
  border: 1px solid pink;
  // grid-gap: 4em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto;
  grid-template-areas:
    "t t t"
    "p1 p2 p3";
}