Grid布局问题：子元素grid-row-start超出父模板行时仅占1行

问题出在你给.grid-parent设置了固定数量的显式网格行（repeat(5, 1fr)），而Grid默认不会为超出显式范围的跨行需求自动扩展显式行的高度规则。当你把grid-row-start设为5时，span 2需要用到第5和第6行，但第6行属于隐式网格行，默认高度是auto（由内容决定），所以看起来只占了1行。

要实现自动适配行高、支持任意跨行的需求，只需给父容器添加grid-auto-rows: 1fr，让所有自动创建的隐式行也使用1fr的高度规则：

修改后的父容器CSS #

.grid-parent {
    background-color: #eee;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr); /* 保留初始5行，可根据需求删除 */
    grid-auto-rows: 1fr; /* 关键：让隐式行高度与显式行一致 */
}

如果你完全不需要预设固定行数，直接去掉grid-template-rows，只保留grid-auto-rows: 1fr即可，Grid会根据子元素的位置自动创建所需的行：

.grid-parent {
    background-color: #eee;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr; /* 所有行自动使用1fr高度 */
}

另外注意子元素的类名拼写错误：.gird-child应该是.grid-child，修正后可避免选择器失效。

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