如何在行数不固定的CSS Grid中定位元素至右下角？

这个问题其实是CSS Grid自动布局与元素定位的典型场景，我来给你两个可行的解决思路，其中第一种是利用Grid原生特性的推荐方案：

方法1：利用Grid原生定位 + 自动填充（推荐） #

核心思路是调整元素的HTML顺序，并借助grid-auto-flow: dense让前面的元素自动填充空白区域，最后通过Grid的负索引定位把最后一个元素固定在右下角。

完整代码示例 #

CSS 代码

.wrapper {
  border: 2px solid #f76707;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  width: 1000px;
  grid-auto-flow: dense; /* 开启自动填充，让元素填满网格空白 */
}

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

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

.last-item {
  grid-column: -1; /* 定位到最后一列 */
  grid-row: -1; /* 定位到最后一行 */
}

HTML 代码

<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>
  <!-- 必须把last-item放在所有元素的最后，让Grid先排列其他元素 -->
  <div class="last-item">last-item</div>
</div>

原理说明 #

• 把.last-item放在HTML结构的最后，Grid会先排列完所有其他元素，再处理这个元素；
• grid-auto-flow: dense会让前面的元素自动填充主元素（占2行2列）留下的空白格子，避免出现不必要的空白行；
• grid-column: -1和grid-row: -1是Grid的负索引语法，分别代表网格的最后一列和最后一行，不管网格自动生成了多少行，都能精准定位到右下角。

方法2：绝对定位（适合固定尺寸网格） #

如果你的网格尺寸是固定的，也可以用绝对定位快速实现，但这种方法需要手动计算元素尺寸，灵活性稍差：

代码示例 #

.wrapper {
  /* 保留原有Grid属性 */
  position: relative; /* 给绝对定位提供参考 */
}

.last-item {
  position: absolute;
  bottom: 10px; /* 与grid-gap保持一致 */
  right: 10px; /* 与grid-gap保持一致 */
  width: calc(120px - 4px); /* minmax的宽度减去边框宽度 */
  height: calc(100px - 4px); /* minmax的高度减去边框宽度 */
}

注意事项 #

这种方法的元素会脱离Grid的文档流，不会影响其他元素的排列，但需要确保网格的高度足够容纳这个元素，否则会出现重叠。

内容的提问来源于stack exchange，提问作者RTYX