如何将Grid项目放置在容器底部？已尝试place-items/align-items: end

你需要将Grid容器中的项目对齐到容器底部，已尝试place-items: end;和align-items: end;未达到预期效果，可通过调整项目的网格行定位来解决：

核心思路是让每个项目从网格底部向上占据指定行数，使用grid-row: span 行数 / -1的语法（-1代表网格的最后一行结束线），具体修改如下：

修改后的CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  width: 200px;
  background: blue;
}
.item {
  background-color: red;
  color: white;
}
.item-1 {
  grid-column: span 5;
  grid-row: span 6 / -1; /* 从底部向上占6行 */
}
.item-2 {
  grid-column: span 4;
  grid-row: span 5 / -1; /* 从底部向上占5行 */
}
.item-3 {
  grid-column: span 3;
  grid-row: span 4 / -1; /* 从底部向上占4行 */
}

对应的HTML代码 #

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

这样修改后，所有项目会自动对齐到Grid容器的底部，符合预期效果。

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