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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

基于您的codepen。在课程.last-item中设置grid-row-end:3

Answer 2

对于相同的布局，请使用此...

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

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

2 个答案: