如何在 CSS Grid 的右下角放置一个元素？ [复制]

Question

我有一个这样的 CSS 网格：

.grid-wrapper
  display: grid
  margin: 0 auto
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
  grid-auto-rows: minmax(100px, auto)
  grid-gap: 10px

我想在开头放置一个主要元素：

.main-item
  grid-column-end: span 2
  grid-row-end: span 2

一系列中间元素紧随其后，并且在网格的最后一个可能位置 - 不跟随其他元素，而是在网格的右下角。

现在我可以把它放在最后一列

.last item
  grid-column-end: -1

但是我找不到将它放在最后一行的方法 - 鉴于未定义行数 -。

有什么想法吗？

https://codepen.io/rtyx/pen/XVQMJQ

.wrapper {
  border: 2px solid #f76707;
  background-color: #fff4e6;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  background-color: #ffd8a8;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  width: 1000px;
}

.main-item {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.last-item {
  grid-column-end: -1;
  grid-row-end: -1;
}

<div class="wrapper">
  <div class="main-item">Main item</div>
  <div class="item1">Item 2</div>
  <div class="item2">Item 3</div>
  <div class="item3">Item 4</div>
  <div class="last-item">last-item</div>
</div>

Answer 1

基于您的代码笔。在课堂.last-item设置grid-row-end:3

Answer 2

对于相同的布局使用这个...

.last-item {
  grid-column-end: -1;
  grid-row-end: 4;
}