[SOLVED] Align child elements to bottom one-by-one without space inside grid div

Align child elements to bottom one-by-one without space inside grid div

There are 2 child divs inside main parent div with "display: grid";

Hight of these 2 elements can be different. I know that i can align these elements vertically to bottom if i use "align-items: end;", but there always will be space between them.

So i want them to be just one-by-one, without space. Something like:

How can i achive this?

Attaching the example here.

.container {
  display: grid;
  align-items: end;
  width: 180px;
  height: 180px;
  background-color: lightgreen;
  grid-template-columns: 1fr;
  gap: 0px;
}

.content {
  background-color: red;
  height:30px;
  padding: 5px;
}

<div class="container">
  <div class="content">content 1</div>
  <div class="content">content 2</div>
</div>

Solution

.container {
  display: grid;
  align-items: end;
  width: 180px;
  height: 180px;
  background-color: lightgreen;
  grid-template-columns: 1fr;
  align-content: end; 
}

.content {
  background-color: red;
  height:30px;
  padding: 5px;
}

<div class="container">
  <div class="content">content 1</div>
  <div class="content">content 2</div>
</div>