CSS Grid：能否阻止相邻列随兄弟元素展开而增高？

使用CSS Grid布局时，同一行的网格项默认会被拉伸至该行的最大高度，所以当某个details元素展开时，同行的其他列也会跟着增高。不用拆分HTML结构，只需调整网格项的对齐属性就能解决这个问题：

方案：设置align-self: start #

给.item-wrap添加align-self: start，让每个网格项仅占据自身内容所需高度，不再强制拉伸填满整行：

.product-data .item-wrap {
    padding: 8px 12px;
    margin-bottom: 20px;
    border: 1px solid #E2DFCC;
    align-self: start; /* 新增属性 */
}

修改后，任意details元素展开时，同行的其他元素不会被拉高，各自保持自身的高度。

原理说明 #

Grid布局中，align-self控制单个网格项在垂直方向的对齐方式，默认值stretch会让元素填满所在行的高度。改为start后，元素对齐到网格区域顶部，高度由自身内容决定。

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