子Grid元素影响父Grid布局问题：原因及解决方案

问题成因 #

当你给item-2内的transparent-shadow元素添加grid-row: span 2时，这个元素所在的父Grid容器（item-2）会因为子元素跨占两行，被拉伸到对应高度。如果item-1和item-2同属一个上层Grid容器，且上层Grid的行高是默认的auto（由内容决定），那么item-2被拉长后，上层Grid对应的行高会被整体撑大——因为Grid布局里同一行的所有子项会共享行高，所以item-1也会被强制拉高，导致内部元素跟着变大，布局乱掉。

结合你提到的现象：item-1的第二个子元素在其父Grid第二行，item-2的在第三行，说明上层Grid的行高被item-2的跨行操作影响，行高被统一调整，进而牵连了item-1的布局。

解决方法 #

• 固定上层Grid行高：给上层Grid设置明确的行高范围，比如用grid-template-rows: minmax(100px, auto) minmax(100px, auto);，这样即使item-2跨两行，也只会在设定的行高范围内拉伸，不会过度影响其他行的高度。
• 隔离item-2的Grid布局：确保item-2是独立的Grid容器，单独设置它的内部行规则，比如给item-2加display: grid; grid-template-rows: auto auto;，让它内部的跨行操作只影响自身，不会传递到上层Grid。
• 让item-1自主控制高度：给item-1添加align-self: start;，这样它会根据自身内容高度来显示，不会跟随上层Grid的行高被强制拉伸。

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