Grid布局中如何让指定面板自适应内容高度？

当前你的Grid布局里，右侧绿色（summary-panel）和红色（apply-panel）面板被强制均分主面板（蓝色）的高度，核心原因是Grid默认会拉伸行高来匹配跨行列的高度。要实现右侧面板高度随内容自然撑开，只需在容器中添加grid-template-rows: auto auto;即可。

修改后的SCSS代码 #

.apply-journey-inner-container{
    display: grid;
    grid-template-areas:
    'main summary'
    'main apply';
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto auto; /* 添加该行控制行高自适应 */
    row-gap: 24px;
    column-gap: 86px;

    .summary-panel{
        grid-area: summary;
        background-color: green;
    }

    .main-panel{
        grid-area: main;
        background-color: blue;
    }

    .apply-panel{
        grid-area: apply;
        background-color: red;
    }
}

原理说明 #

• 默认状态下，Grid会自动调整行高，让跨多行的元素（此处为main-panel）的高度被均分到对应行中，导致右侧两个面板被强制拉平。
• 设置grid-template-rows: auto auto;后，每一行的高度由该行内的最高内容决定：第一行高度由summary-panel的内容撑开，第二行高度由apply-panel的内容撑开，main-panel则自动占据两行的总高度，完全适配右侧面板的高度总和。

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