在网格元素内垂直对齐中心和底部[重复]

Question

我有一个包含两个元素的网格 - childa 和 childb。

childb 有它自己的 inside 孩子，我不能 center vertically 和放置 bottom vertically。

有什么帮助吗？

.parent {
  display: grid;
  height: 170px;
  background: black;
  grid-template-columns: 50% 50%;
  grid-gap: 10px;
}

.child {
  background: gold;
  height: 150px;
  margin-top: 10px;
}

.inside {
  width: 80%;
  background: red;
  margin: 0 auto;
}

<div class='parent'>
  <div class='child childa'>lorem</div>
  <div class='child childb'>
    <div class='inside'>
      sdfsdfsdfd<br> adfdsfsdds
      <br>
    </div>
  </div>
</div>

Answer 1

如果您不是在寻找纯网格解决方案，我相信 flexbox 功能可以帮助您实现您想要的。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 是一个很好的来源。

.childb {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

编辑：您可以通过查看上面的链接随意编辑值（例如 center）。