CSS Grid元素无法垂直正确对齐，请求技术协助

嘿，我太懂这种感觉了——明明看起来是个小问题，却耗了好几个小时卡着！我来帮你解决Grid元素的垂直对齐问题。

先看你给出的代码，目前所有div都设了固定的400px高度，刚好和Grid行的高度（auto会被内容撑开成400px）一致，所以暂时没看出对齐问题，但我猜你实际场景里要么是元素高度不统一，要么是想让元素在Grid单元格里有特定的垂直排布方式，下面给你几种实用方案：

1. 统一设置所有Grid子元素的垂直对齐 #

给Grid容器加个align-items属性，就能全局控制所有子元素在单元格内的垂直位置，常用取值有：

• stretch：默认值，元素会拉伸填满整个单元格高度
• start：元素贴紧单元格顶部
• center：元素在单元格垂直居中
• end：元素贴紧单元格底部

比如你想让所有子元素垂直居中，修改CSS如下：

section {
  display: grid;
  grid-template-rows: auto;
  margin: 40px 0 0 0;
  align-items: center; /* 新增这行 */
}

2. 单独调整某个子元素的对齐方式 #

如果只想让某一个元素有特殊的垂直对齐，给它加align-self属性就行，取值和align-items完全一样：

/* 让.top里的第一个div贴紧单元格底部 */
section.top div:first-child {
  align-self: end;
}

额外补充：固定Grid行高的场景 #

如果你希望Grid的行高度是固定值，而不是被内容撑开，可以把grid-template-rows设为固定数值，比如grid-template-rows: 400px，这样不管子元素高度多少，单元格高度都是400px，再配合align-items就能精准控制元素位置了。

给你个调整后的示例代码，方便你直观看到效果：

HTML #

<section class="top">
  <div></div>
  <div></div>
</section>
<section class="bottom">
  <div></div>
  <div></div>
  <div></div>
</section>

CSS #

section {
  display: grid;
  grid-template-rows: 400px; /* 固定行高 */
  margin: 40px 0 0 0;
  align-items: center; /* 子元素垂直居中 */
}

section.top {
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 50px;
}

section.bottom {
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 50px;
}

section div {
  background: lightblue;
  height: 300px; /* 故意设得比行高小，方便看对齐效果 */
}

这样你就能明显看到子元素在Grid单元格里垂直居中的效果了～

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