CSS网格:动态跨越最后一列 [英] CSS Grid: dynamically span the last column
本文介绍了CSS网格:动态跨越最后一列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以自动跨越最后一列以占据网格中的剩余空间?基本上,我正在尝试实现以下目标:
Is it possible to automatically span the last column to occupy the remaining space in the grid? Basically I'm trying to achieve this:
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.col {
background: blue;
padding: 20px;
border: 1px solid red;
}
.col:last-child {
background: yellow;
/* missing magic here */
}
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
推荐答案
不幸的是,在当前版本的CSS网格中似乎没有像 grid-column这样的真正魔术:span auto / -1
作为通用解决方案。但是对于这种3x1网格的特殊情况,您可以执行以下操作:
Unfortunately, it seems that in current version of CSS grid there is no true magic like grid-column: span auto / -1
as a universal solution. But for this particular case of 3x1 grid you can do something like the following:
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.col {
background: blue;
padding: 20px;
border: 1px solid red;
}
.col:last-child {
background: yellow;
grid-column-end: -1;
}
.col:nth-child(1):last-child {
grid-column-start: 1;
}
.col:nth-child(2):last-child {
grid-column-start: 2;
}
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
这篇关于CSS网格:动态跨越最后一列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文