如何在不破坏CSS Grid布局的情况下调整网格项（加载更多按钮）高度

问题根源在于你给Grid子元素设置了固定的grid-row范围，比如#courses的grid-row:1/3和#articles的grid-row:3/5，这会强制它们占据预设的行位置，完全不受左侧Bio、Badges区域动态高度变化的影响。当Bio展开高度增加时，Courses下方就会出现空白，而Articles仍固定在指定的行起始位置，无法自动贴合Courses底部。

修复方案 #

移除所有子元素的固定grid-row设置，让Grid自动根据内容高度分配行位置，同时保留grid-column控制列跨度即可。修改后的CSS代码如下：

#grid{
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto; /* 替换masonry，自动适配内容行高 */
    grid-auto-flow: dense; /* 可选：自动填充布局空白，优化排版 */
}

#bio{
    grid-column: 1/2;
    border: 3px solid green;
}
#courses{
    grid-column: 2/4;
    /* 移除原grid-row:1/3 */
}
#badges{
    grid-column: 1/2;
    border: 3px solid #000;
    /* 移除原grid-row:2/4 */
}
#articles{
    grid-column: 2/4;
    /* 移除原grid-row:3/5 */
}
#likes{
    grid-column: 1/2;
    border: 3px solid red;
}

/* 以下UI样式保持不变 */
.articles{
    display: flex;
}

.article{
    width: 200px;
    height: 200px;
    background-color: gray;
    margin: 5px;
}
.extra{
    display: none;
}
.toggle{
    display: block;
}

修改说明 #

1. 移除固定行位置：删掉#courses、#badges、#articles的grid-row属性，Grid会根据元素在HTML中的顺序和内容高度，自动分配行位置，确保Articles始终紧跟在Courses下方。
2. 替换Masonry行设置：grid-template-rows: masonry目前浏览器支持度有限，换成grid-auto-rows: auto能保证在所有主流浏览器中稳定运行，自动适配每一行的内容高度。
3. 可选优化布局：添加grid-auto-flow: dense可以让Grid自动填充布局中的空白间隙，避免因元素高度差异导致的零散空白，让整体排版更紧凑。

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