0

I have a grid of two elements - childa and childb.

childb has its own inside child which I cannot center vertically and place bottom vertically.

Any help?

.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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
blueSky
  • 247
  • 4
  • 14

1 Answers1

3

If you're not looking for a grid-only solution, I believe flexbox functionalities can help you achieve what you want.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a great source for this.

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

Edit: you can edit the values (such as center) as you wish by looking into the link above.

saglamcem
  • 677
  • 1
  • 8
  • 15
  • He said 'bottom-vertically' as well. That's why I'm not sure about what he wants – Andy Jul 04 '18 at 09:27
  • Yeah, I realized that after sending my post. Edited so that whoever needs to can look up a solution in the css-tricks tutorial. – saglamcem Jul 04 '18 at 09:28