CSS Grid设置align-self:end后如何避免上方元素出现多余间隙？

问题根因 #

你未显式定义网格的行高规则，默认grid-auto-rows: auto配置下，3个网格项各占一行，三行高度会默认分配容器的剩余垂直空间，#one、#two所在的行高度被撑高至大于内容本身高度，因此两个元素之间出现多余间隙。你之前尝试的grid-auto-rows: min-content会让所有行高都贴合内容，整个网格高度仅等于内容总高度，没有剩余空间供align-self: end生效，因此会失效。

可行解决方案 #

方案1：显式定义网格行模板（适合固定顶部元素数量的场景） #

给网格容器添加grid-template-rows规则，指定前两行高度贴合内容，最后一行占满所有剩余空间，即可同时满足前两个元素紧密排列、最后一个元素靠下对齐的需求。
修改后的核心CSS代码：

#grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* 新增行模板规则 */
  grid-template-rows: repeat(2, min-content) 1fr;
}

方案2：使用margin-top: auto实现底部对齐（更灵活，不限制顶部元素数量） #

不需要修改网格的行规则，直接删掉#three的align-self: end属性，改为设置margin-top: auto，即可自动将#three推到容器最底部，前面的元素会自然紧密排列在顶部。
修改后的核心CSS代码：

#three {
  margin-top: auto;
}

两种方案均可以实现需求：#one、#two无间隙紧接排列在容器顶部，#three对齐容器底部。

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