如何在CSS Grid设置中考虑动态行？

Question

我的家庭仪表板的总体结构是div个元素彼此堆叠（每个元素在屏幕范围内，并提供不同类型的信息）。

我通过CSS Grid管理块的高度：整个应用程序为min-height: 100vh;，除auto之外，其他行均为1fr。效果很好。

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

如何解决？

我能想到的一种方法是以CSS将其视为一行的方式强制组件的存在。现在，在关闭时，我在开发工具中将其视为<!----> == $0。

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

---

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

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

#app {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto auto 1fr;
}

#footer {
  align-self: end;
}

div {
  border-style: dashed;
  border-width: 1px;
}
<div id="app">
  <div>this line is always visible</div>
  <div>this one is toggled - here it is visible</div>
  <div id="footer">this is the footer</div>
</div>

下面的代码是相同的代码，但是第二行已切换（在此处注释，通过实际代码中的v-if禁用）。看看它如何影响不再位于底部的页脚，因为CSS尚未更改（=不适应消失的行）]

#app {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto auto 1fr;
}

#footer {
  align-self: end;
}

div {
  border-style: dashed;
  border-width: 1px;
}
<div id="app">
  <div>this line is always visible</div>
  <!-- <div>this one is toggled - here it is not visible anymore </div> -->
  <div id="footer">this is the footer</div>
</div>

我的家庭仪表板具有一个div元素，它们相互堆叠的一般结构（每个元素在整个屏幕范围内，并提供不同类型的信息）。我管理方块的高度...

Answer 1

一个想法是显式定义页脚的行以始终使用最后一个行：

Answer 2

CSS grid系统不是动态行/列的最佳选择。当您提前知道布局会是最佳状态。