如何让CSS Grid布局中的元素高度仅适配自身内容？

嘿，这个问题我之前也踩过坑！CSS Grid 默认会让同一网格轨道内的所有子元素自动拉伸到轨道的最高高度（因为容器默认的 align-items 属性值是 stretch），但要让某个元素（比如你提到的 div2）只占据自身内容所需高度，其实很简单，用下面这个方法就能搞定：

核心方案：给目标元素设置 align-self: start #

你只需要给想要自适应内容高度的元素单独添加 align-self: start 样式，就能覆盖默认的拉伸行为，让它只包裹自身内容：

.div2 {
  align-self: start;
}

原理说明 #

• Grid 容器默认的 align-items: stretch 会让所有网格项沿交叉轴（垂直方向，默认情况下）拉伸，填满整个轨道高度；
• align-self 属性可以单独控制单个网格项的交叉轴对齐方式，设置为 start 后，元素会对齐到轨道顶部，高度仅由自身内容决定。

如果你的布局有其他特殊需求，比如想让元素底部对齐，也可以把 start 换成 end；要是想居中就用 center，灵活度很高~

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