在网格元素内垂直对齐中心和底部

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;
}

编辑：您可以通过查看上面的链接来根据需要编辑值（例如居中）。