在网格底部对齐网格子级

Question

我有一个网格

#featuredRestaurantSection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  -webkit-column-gap: 10px;
  column-gap: 10px;
  row-gap: 2em;
  padding: 10px;
}

我里面有3个div a1，a2 a3。我希望div.a3应该始终位于网格的底部。因为a1和a2的高度可以变化，而且看起来很奇怪。

有可能吗？

谢谢

Answer 1

以下应该可以解决问题

#featuredRestaurantSection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  -webkit-column-gap: 10px;
  column-gap: 10px;
  row-gap: 2em;
  padding: 10px;
}

.a3 {
  align-self: end;
}

<div id="featuredRestaurantSection">
  <div class="a1">Item 1</div>
  <div class="a2">Item 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus magni ad, tenetur pariatur commodi minus libero tempora.</div>
  <div class="a3">Item 3</div>
</div>