Question

我想将网格项始终放置在网格的最后一行和/或最后一列。即使我不知道网格可能有多少行或列。这样有可能吗？

这将是我的网格：

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

我只能通过显式的行或列找到放置： MDN

Answer 1

在my comment之后；来自https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid#Counting_backwards

对于英语，我们也可以从网格的块和行内末尾开始倒数，这将是右侧的列线和最后的行线。这些行可以命名为-1，您可以从那里倒数–因此倒数第二行是-2。

Answer 2

您可以使用伪元素 :after将元素放置在网格的末尾-请参见下面的演示

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns:after {
  content:'';
  display: block;
  border: 1px solid red;
  height: 100px;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

或者您可以使用order属性将元素放置在末尾-如果任何其他 grid item 具有order属性，则只需提供一个较大的值即可。参见下面的演示：

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 16.5rem));
  grid-gap: 1rem;
}

.columns div {
  border: 1px solid;
  height: 100px;
}

.columns .last {
  order: 1;
  border: 1px solid red;
}

<div class="columns">
  <div></div>
  <div></div>
  <div></div>
  <div class="last"></div>
  <div></div>
  <div></div>
  <div></div>
</div>

是否可以明确地使网格项目始终出现在最后一行或最后一列？

2 个答案: