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

order CSS属性设置将项目放置在flex或grid容器中的顺序。容器中的项目按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

grid-row CSS属性是grid-row-start和grid-row-end的简写属性，通过贡献线，跨度或不进行任何指定来指定网格项目在网格行中的大小和位置（自动）到其网格位置，从而指定其网格区域的inline-start和inline-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列上。

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

1 个答案: