动态Grid布局下，移除可选元素后如何维持指定元素高度？

我的页面中有一个包含四个元素的section，移动端使用Grid布局实现堆叠效果，代码如下：

<section>
    <div>Div 1</div>
    <div>Div 2 - I am optional!</div>
    <div>Div 3 - I might need to grow</div>
    <div>Div 4</div>
</section>

对应的移动端CSS：

section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content 1fr min-content;
    row-gap: 1.5em;
}

问题描述 #

当Div2为空时，会通过display: none;将其隐藏，但此时section内只剩三个元素，Grid会按顺序将元素填充到预定义的行中，导致Div3被分配到原Div2的min-content行，Div4被分配到原Div3的1fr行，出现高度错误和Div4下方多余间隙的问题。

需求 #

Div3需始终保持1fr的高度，无论它是第几个元素；Div4需始终作为最后一行元素，无论它是第几个元素。即当可选元素Div2隐藏时，对应的整行需自动从网格中移除。

解决方案一：网格线命名+显式绑定元素行位置 #

这是最直观可靠的方法，通过给网格行命名，将每个元素绑定到固定的命名行，不受其他元素是否存在的影响。

1. 给每个div添加类名（方便精准选择）：

<section>
    <div class="row-top">Div 1</div>
    <div class="row-optional">Div 2 - I am optional!</div>
    <div class="row-grow">Div 3 - I might need to grow</div>
    <div class="row-bottom">Div 4</div>
</section>

2. 修改CSS，定义命名网格行并绑定元素位置：

section {
    display: grid;
    grid-template-columns: 1fr;
    /* 为每行命名并指定行高 */
    grid-template-rows: [top-row] min-content [optional-row] min-content [grow-row] 1fr [bottom-row] min-content;
    row-gap: 1.5em;
}

.row-top { grid-row: top-row; }
.row-optional { grid-row: optional-row; }
.row-grow { grid-row: grow-row; }
.row-bottom { grid-row: bottom-row; }

当row-optional元素被设置为display: none后，网格会自动跳过optional-row行，不会占用任何空间，row-grow依然保持1fr高度，row-bottom始终处于最后一行，完全满足需求。

解决方案二：使用CSS :has选择器动态调整行模板（现代浏览器适用） #

如果不想修改HTML结构添加类名，可以用:has选择器检测可选元素的状态，动态切换网格行模板：

section {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.5em;
}

/* 当Div2存在（未隐藏）时的行模板 */
section:has(div:nth-child(2):not([style*="display:none"])) {
    grid-template-rows: min-content min-content 1fr min-content;
}

/* 当Div2隐藏时的行模板 */
section:not(:has(div:nth-child(2):not([style*="display:none"]))) {
    grid-template-rows: min-content 1fr min-content;
}

/* 强制Div3为倒数第二行（占1fr），Div4为最后一行 */
div:nth-last-child(2) { grid-row: span 1 / -2; }
div:last-child { grid-row: -1; }

注意：:has选择器目前支持Chrome、Firefox 121+、Safari等现代浏览器，如需兼容旧版浏览器，建议使用方案一或方案三。

解决方案三：结合JS添加状态类（兼容性最优） #

如果需要兼容不支持:has的旧版浏览器，可以通过JS检测可选元素的状态，给section添加对应的类，再调整CSS：

1. JS代码（检测Div2是否为空并处理）：

const optionalDiv = document.querySelector('div:nth-child(2)');
const section = optionalDiv.parentElement;

// 检测Div2是否为空，为空则隐藏并添加状态类
if (optionalDiv.textContent.trim() === '') {
    optionalDiv.style.display = 'none';
    section.classList.add('without-optional');
}

2. CSS代码：

section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content 1fr min-content;
    row-gap: 1.5em;
}

/* 当没有可选元素时，调整行模板 */
section.without-optional {
    grid-template-rows: min-content 1fr min-content;
}

/* 重新绑定元素行位置 */
section.without-optional div:nth-child(2) { grid-row: 2; } /* 原Div3现在是第二个元素，绑定到1fr行 */
section.without-optional div:last-child { grid-row: 3; } /* 原Div4现在是第三个元素，绑定到最后一行 */

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