我可以将 css 网格项推送到具有动态项长度的 css 网格的最后一个位置吗?

Question

我尝试将 css 网格中的项目推送到最后一个位置或更好的最后一行，但我不知道如果我有随机数量的元素是否可能。

我尝试了一些网格行开始和网格行结束属性以及一些速记将其推送到最后一行

* {
box-sizing: border-box;
}
.wrapper {
padding: 20px;
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.wrapper .item-for-last-line {
color: #0a8e0a;
border-color: #0a8e0a;
background-color: #9df29d;
}

<div class="wrapper">
<div>One</div>
<div class="item-for-last-line">Item for last Line</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

https://codepen.io/p4nk47w0rk/pen/ZgEeXr

当我将网格行开始设置为 -2 时，我认为我可以将其推送到最后一行，但它不起作用

Answer 1

您可以使用顺序设置在最后一个位置：https://codepen.io/gc-nomade/pen/zgYXWa

div{order:1}
div.item-for-last-line {order:2}

https://developer.mozilla.org/en-US/docs/Web/CSS/order

orderCSS 属性设置在flex或grid容器中布置项的顺序。容器中的项按升序order值排序，然后按其源代码顺序排序。

要跨越 2 列，它非常简单，规则值为 ：span 2表示grid-column。

您也可以使用 ：

div.item-for-last-line grid-column: span 2 ;}

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

grid-rowCSS 属性是grid-row-start和grid-row-end的简写属性，它通过为其网格放置贡献线条、跨度或不显示(自动)来指定网格项在网格行中的大小和位置，从而指定其网格区域的内联开始边缘和内联结束边缘。

代码段演示。

* {
box-sizing: border-box;
}
.wrapper {
padding: 20px;
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper>div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
div {
order: 1
}
.wrapper .item-for-last-line {
color: #0a8e0a;
border-color: #0a8e0a;
background-color: #9df29d;
order: 2;
grid-column: span 2;
/* if  needed*/
}

<div class="wrapper">
<div>One</div>
<div class="item-for-last-line">Item for last Line</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>

如果您希望将其放置在 2 列上。