css - 我可以将 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

当我将 grid-row-start 设置为 -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

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

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

你也可以使用:

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

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

The grid-row CSS property is a shorthand property for grid-row-start and grid-row-end specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

片段演示。

* {
  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 列之上。