如何使Grid容器中子元素无间距逐个靠底部对齐？

问题出在你使用了align-items: end——这个属性是让每个单元格内的元素对齐单元格底部，但Grid容器在有固定高度时，会把剩余空间分配给单元格的顶部区域，导致两个子元素所在的单元格之间出现间距。

要实现子元素紧密靠底排列，只需把align-items: end替换为align-content: end：

• align-content负责对齐整个Grid内容区域（所有单元格组成的整体），当设置为end时，整个内容块会靠容器底部放置，同时单元格高度会自适应子元素内容，自然就不会产生额外间距。

修改后的完整代码如下：

.container {
  display: grid;
  align-content: end; /* 替换原align-items */
  width: 180px;
  height: 180px;
  background-color: lightgreen;
  grid-template-columns: 1fr;
  gap: 0;
}

.content {
  background-color: red;
  height: 30px;
  padding: 5px;
}

<div class="container">
  <div class="content">content 1</div>
  <div class="content">content 2</div>
</div>

如果子元素高度不固定，这个方案依然适用，因为Grid会自动根据内容调整行高，再把整个内容块靠底对齐。

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