How to place grid items at the end of the container - html

Question

I have a grid container and I want my items to be placed at bottom.
I have this Actual
I want something like this
Expected
.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've already tried place-items: end; and align-items: end;

Answer 1

You can use the two value start / end syntax for grid-column and grid-row to establish the start and end of your items.
For example grid-row: 2 / span 3; would start at the 2nd grid line and span an additional 3 more down to 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>
Note: In response to the edit about align-items, this only works when the layout isn't being defined by spanning multiple rows.