CSS Grid首行列高不一致：如何通过CSS统一首行两列高度？

问题出在.title元素的margin-bottom: 3rem上——这个外边距会在标题元素下方产生额外空白，撑高了整个grid行，但标题的底部边框是在元素本身的底部（外边距上方），而#thumbnail的底部边框是在其元素的底部（也就是grid行的底部），导致两者边框不对齐。

只需调整以下CSS即可修复：

1. 移除.title的margin-bottom，让标题元素的底部边框和grid行底部对齐
2. 若需要标题与下方文章保持间距，将间距移到.article上（避免影响首行布局）

修改后的CSS代码片段：

.title {
  grid-row: 1;
  grid-column: 1;
  font-family: 'Raleway';
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  font-size: 150%;
  font-weight: bold;
  text-align: left;
  color: var(--title);
  padding: 3rem 3rem;
  padding-top: 4rem;
  /* 移除导致边框错位的margin-bottom */
  /* margin-bottom: 3rem; */
  border-bottom: var(--borders);
}

.article {
  grid-column: 1 / span 2;
  padding: 0rem 3rem;
  /* 添加间距，替代原来.title的margin-bottom */
  margin-top: 3rem;
}

额外优化建议：

• 给#content添加align-items: start，确保首行两个元素都从单元格顶部开始布局，避免不必要的垂直拉伸：

#content {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: start;
}

这样修改后，首行两列的底部边框会完全对齐，同时保持原有的视觉间距。

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