'Align Div to the bottom of the Parent div

I want to align a div to the bottom of the parent div. An example is on the screen below enter image description here

these div are inside an grid, why is the button inside the div not sticked to the bottom.

htmlcsssass


Solution 1:[1]

.parent {
  height: 400px;
  width: 350px;
  background-color: black;
  display: flex;
  align-items: end;
  justify-content: center;
}

.child {
  width: 90%;
  height: 30px;
  background-color: cyan;
  margin-bottom: 20px;
  border-radius: 5px;
}
<div class="parent">
  <div class="child"></div>
</div>

Solution 2:[2]

I suggest you use CSS flexbox layout rules. Look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for a great guide.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve Walson
Solution 2 Fred Klein

Related Questions