使用CSS Grid实现响应式双栏博客布局：解决标题高度拉伸问题

我需要实现如下所示的响应式设计，仅用纯CSS完成：

我尝试了下面的CSS Grid方案，但Heading盒子被拉伸到和Table of contents一样高。有没有办法让这些行的高度各自独立？

我尝试的代码 #

h1          { grid-area: heading; }
div.toc     { grid-area: toc; }
div.content { grid-area: content; }
div.author  { grid-area: author; }
div.related { grid-area: related; }

article {
  display: grid;
  grid-template-areas:
    "heading"
    "toc"
    "content"
    "author"
    "related";
}

@media (min-width: 500px) {
  article {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading toc"
      "content author"
      "related .";
  }
}

article > * { border: 1px solid red; }
article > *, h3, p, ul, li { margin: 8px; }

<article>    
  <h1>My Heading</h1>
  <div class="toc">
    <h3>Table of contents</h3>
    <ul>
      <li>Chapter 1</li>
      <li>Chapter 2</li>
      <li>Chapter 3</li>
      <li>Chapter 4</li>
      <li>Chapter 5</li>
      <li>Chapter 6</li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quidem modi, exercitationem atque cumque rem molestias dicta delectus tempore fuga voluptatum deserunt, quasi aliquid nulla dignissimos praesentium ullam, numquam nemo!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ab ipsa, fugit aliquam cumque quisquam, inventore mollitia perferendis, tempora nam magni maiores ea eveniet qui minus voluptatum doloribus modi quam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, ut nulla. Cupiditate numquam dolor cumque, iure, debitis nulla reprehenderit placeat alias temporibus, maiores porro, repudiandae accusamus optio dicta quos officiis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ea voluptatum, nam. Exercitationem eligendi magni doloremque, rerum aspernatur eos consequuntur, est vero facere nam temporibus libero animi modi cumque eveniet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima veniam ipsum, ullam enim quisquam maiores illo totam consectetur dolor in laboriosam animi quam laborum quas quibusdam tempore, excepturi magni rerum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus minus excepturi temporibus velit laboriosam, nemo architecto repudiandae maiores, quidem mollitia recusandae corporis officiis deserunt quas, quis at, aliquid a animi!</p>
  </div>
  <div class="author">- written by me</div>
  <div class="related">
    <h3>Related articles</h3>
    <ul>
      <li>Article 1</li>
      <li>Article 2</li>
      <li>Article 3</li>
    </ul>
  </div>
</article>

问题根源是CSS Grid的默认规则：同一行的网格项会自动拉伸至相同高度。要让Heading和TOC各自保持内容高度，最简单的办法是给这两个元素加上align-self: start，让它们只占用自身内容所需的高度，不会被强制拉平。

修改后的CSS代码 #

h1          { grid-area: heading; align-self: start; } /* 新增对齐规则 */
div.toc     { grid-area: toc; align-self: start; } /* 新增对齐规则 */
div.content { grid-area: content; }
div.author  { grid-area: author; }
div.related { grid-area: related; }

article {
  display: grid;
  grid-template-areas:
    "heading"
    "toc"
    "content"
    "author"
    "related";
}

@media (min-width: 500px) {
  article {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading toc"
      "content author"
      "related .";
  }
}

article > * { border: 1px solid red; }
article > *, h3, p, ul, li { margin: 8px; }

这样修改后，Heading和TOC就会根据自身内容高度显示，不会再被拉伸成一样高。如果需要其他区域也保持内容高度，给对应的网格项加上同样的align-self: start即可。

内容的提问来源于stack exchange，提问作者Tonald Drump