Cannot manage to have heights relative to items contents with css grid

Question

Currently when I create a css layout with grid, items within this layout will take up the height of the heighest item. Is it possible to make an item take only the height its content needs?

https://codepen.io/anon/pen/NQpQOr

In this example, I want div2 to have a height relative to its content.

Answer 1

You can use align-self property to fix it:

.div-2 {
  align-self: start;
}