コンテナの最後にグリッド要素を配置する方法

Question

グリッド コンテナーがあり、項目を一番下に置きたいと考えています。

これは実物を持っています

これが欲しいです 期待

.container {
  表示: グリッド;
  グリッド テンプレート列:repeat(14, 1fr);
  グリッドテンプレート行:repeat(6, 1fr);
  グリッドギャップ: 8px;
  幅: 200ピクセル;
  背景: 青;
}
。アイテム {
  背景色: 赤;
  色: 白;
}
.item-1 {
  グリッド列: スパン 5;
  グリッド行: スパン 6;
}
.item-2 {
  グリッド列: スパン 4;
  グリッド行: スパン 5;
}
.item-3 {
  グリッド列: スパン 3;
  グリッド行: スパン 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>

追記: place-items: end; と align-items: end;

を試してみました。

Answer 1

2 つの値 grid-column および grid-rowstart / end 構文を使用して、開始位置と終了位置を決定できます。アイテム。

たとえば、grid-row: 2 / span 3; は 2 番目のグリッド ラインから始まり、3 つのグリッド ラインにまたがり、5 番目のグリッド ラインで終了します。

リーリー リーリー