Html 如何在CSS网格设置中考虑动态行？

My home dashboard的一般结构是

div

元素相互叠加（每个元素都是屏幕宽的，提供不同类型的信息）

我通过CSS网格管理块的高度：整个应用程序是

minheight:100vh和行是
auto
，除了
1fr
之外。它工作得很好

我现在面临的情况是，其中一行动态地存在或不存在。这是因为它实际上是一个Vue组件，使用
v-if
有条件地显示。问题是CSS部分不知道它的存在，并且
网格模板行
已修复。这会导致切换时错误的行被设置为
auto
和
1fr

如何解决这个问题？

我能想到的一种方法是强制组件以CSS将其计算为一行的方式存在。现在，我在Dev Tools中将此元素视为关闭时的
==$0

另一种方法是“描述”列模板，而不是有一个固定的列表。“尽可能多地使用
auto
，然后使用
1fr
和一个
auto
”


下面的两个代码片段模拟了我的问题。

第一种情况是所有元素都可见


#应用程序{
显示：网格；
最小高度：100vh；
网格模板行：自动1fr；
}
#页脚{
自我对齐：结束；
}
div{
边框样式：虚线；
边框宽度：1px；
}

这条线总是可见的
这一个是切换-在这里它是可见的
这是页脚
CSS网格

系统不是动态行/列的最佳选择。当您提前知道布局时，它将处于最佳状态

然而，你可以做一些事情

选项1

您可以定义

网格模板行：auto-auto 1fr使用内联样式（在父元素内，并使用
javascript
进行控制）

因此，在这种情况下：



随着行数的改变，样式的值也随之改变



选项2

提前定义几个类，并根据行数切换到适当的类：

.rows-2
网格模板行：自动1fr；
}
.第3排
网格模板行：自动1fr；
}



这两种解决方案都需要一些javascript来调整所需的网格布局。
一个想法是明确定义页脚的行，以便始终使用最后一行：


#应用程序{
显示：网格；
最小高度：100vh；
网格模板行：自动1fr；
}
#页脚{
自我对齐：结束；
网格行：-1；
}
div{
边框样式：虚线；
边框宽度：1px；
}

这条线总是可见的
这一个是切换-在这里它是可见的
这是页脚
这条线总是可见的
这是页脚
您能分享您的代码吗？这样我们就可以看到结构、元素数量、模板、，etc@TemaniAfif：好的，我有一个最小化代码的想法，示例反映了我现在的问题。嗯…为什么不使用flexbox呢？啊，这是一个好主意。我一直在寻找这种相对计数，但不知道它的存在。
au如何到
网格模板行中的
，然后解释-当
网格模板行
中的元素数量与实际行数不匹配时？（当切换行关闭时）@WoJ中间的
自动
将被计算为0，但您将始终有3行，第二行为空，因为其中没有任何项目