如何在 CSS Grid 设置中考虑动态行?
Posted
技术标签:
【中文标题】如何在 CSS Grid 设置中考虑动态行?【英文标题】:How to account for dynamic rows in a CSS Grid setup? 【发布时间】:2020-04-16 18:06:34 【问题描述】:我的主页仪表板具有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>
【问题讨论】:
你能分享你的代码吗?所以我们可以看到结构、元素数量、模板等 @TemaniAfif:好的,有一个想法来最小化代码,这些例子现在反映了我的问题。 嗯...为什么不使用 flexbox 呢? 【参考方案1】:一个想法是明确定义页脚的行以始终使用最后一个:
#app
display: grid;
min-height: 100vh;
grid-template-rows: auto auto 1fr;
#footer
align-self: end;
grid-row:-1;
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>
<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>
【讨论】:
啊,这是个好主意。我一直在寻找这种相对计数,但不知道它存在。当grid-template-rows
中的元素数量与实际行数不匹配时,grid-template-rows
中的auto
是如何解释的? (当切换行关闭时)
@WoJ 中间的 auto
将被计算为 0,但您将始终有 3 行,第二行为空,因为其中没有放置任何项目【参考方案2】:
CSS grid
系统不是动态行/列的最佳选择。当您提前知道布局将是什么时,这是最好的。
但是,您可以做一些事情。
选项 1
您可以使用内联样式定义grid-template-rows: auto auto 1fr;
(在父元素内,并使用javascript
进行控制。
所以,在这种情况下:
<div id="app" style="grid-template-rows: auto auto 1fr;">
随着行数的变化,样式的值也随之改变。
<div id="app" style="grid-template-rows: auto 1fr;">
选项 2
提前定义几个类,根据行数切换到合适的类:
.rows-2
grid-template-rows: auto 1fr;
.rows-3
grid-template-rows: auto auto 1fr;
<div id="app" class="rows-2/3">
这两种解决方案都需要一些 javascript 来调整到所需的网格布局。
【讨论】:
以上是关于如何在 CSS Grid 设置中考虑动态行?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 CSS Grid 中突出显示行中的所有单元格(显示:网格)
如何在 Ag-Grid 中将相同的相邻行与动态行跨度合并? [关闭]
用于 Django 中动态内容的 CSS Grid/Flexbox