在 css 网格中将项目向上移动一行

Question

我正在尝试使用 css 网格创建布局。它基本上是一个跨越两列的标题，左边是不同的文本，右边是一个图片库。

这是我正在做的事情的代码笔：https://codepen.io/Flobin/pen/LYwNJPx?editors=1100

.project {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: [col-start] 1fr [col-center] 2fr [col-end];
  grid-template-rows: minmax(3rem, auto);
  grid-gap: 1rem;
  max-width: 70rem;
  margin: 0 auto;
}

.project-header {
  width: 100%;
  margin-bottom: 2rem;
  grid-column: col-start / col-end;
  background-color: red;
}

.project-title {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.project-info,
.project-text {
  grid-column: col-start / col-center;
}

.project-info {
  background-color: blue;
}

.project-text {
  background-color: green;
}

.project-gallery {
  background-color: purple;
  grid-column: col-center / col-end;
  columns: 2 auto;
  column-gap: 1rem;
}

.project-gallery a {
  display: block;
  margin-bottom: 1rem;
}

.project-gallery img {
  display: block;
}

<article class="project">
  <header class="project-header">
    <h1 class="project-title">Title</h1>
  </header>
  <section class="project-info">
    <ul>
      <li class="project-year">
        Wanneer: 2016 - heden
      </li>
      …
    </ul>
  </section>
  <section class="project-text">
    <p>a bunch of text</p>
    …
  </section>
  <section class="project-gallery gallery">
    <a href="#">
      <figure>
        <picture class="image">
          <img src="https://placehold.co/600x400">
        </picture>
      </figure>
      …
    </a>

  </section>
</article>

是否可以将紫色背景的图片库向上移动，使其从标题下方开始？如果是的话，怎么办？

Answer 1

一位善良的 reddit 用户分享了他的方法，我将在这里概述。

使用命名网格区域，它的工作原理是：

.project {
  display: grid; 
  grid-template-columns: 1fr 2fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  grid-template-areas: 
    "project-header project-header"
    "project-info project-gallery"
    "project-text project-gallery"; 
}
.project-header { grid-area: project-header; }
.project-info { grid-area: project-info; }
.project-text { grid-area: project-text; }
.project-gallery { grid-area: project-gallery; }