How to place grid elements at the end of a container

Question

I have a grid container and I want my items to be at the bottom.

I have this actual

I want this Expectations

.container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  width: 200px;
  background: blue;
}
.item {
  background-color: red;
  color: white;
}
.item-1 {
  grid-column: span 5;
  grid-row: span 6;
}
.item-2 {
  grid-column: span 4;
  grid-row: span 5;
}
.item-3 {
  grid-column: span 3;
  grid-row: span 4;
}

<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

PS: I have tried place-items: end; and align-items: end;

Answer 1

You can use the two values ​​​​grid-column and grid-rowstart / end syntax to determine the start and end position of the item.

For example, grid-row: 2 / span 3; will start at the 2nd grid line, span 3 grid lines, and end at the 5th grid line.

.container {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  width: 200px;
  background: blue;
}
.item {
  background-color: red;
  color: white;
}
.item-1 {
  grid-column: span 5;
  grid-row: span 6;
}
.item-2 {
  grid-column: 6 / span 4;
  grid-row: 2 / span 5;
}
.item-3 {
  grid-column: 10 / span 3;
  grid-row: 3 / span 4;
}

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>