Cara meletakkan elemen grid di hujung bekas

Question

Saya mempunyai bekas grid dan saya mahu item saya berada di bahagian bawah.

Saya mempunyai ini sebenarnya

Saya mahu ini Jangkaan

.container {
  paparan: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(6, 1fr);
  jurang grid: 8px;
  lebar: 200px;
  latar belakang: biru;
}
.item {
  warna latar belakang: merah;
  warna: putih;
}
.item-1 {
  lajur grid: rentang 5;
  grid-row: rentang 6;
}
.item-2 {
  lajur grid: rentang 4;
  baris grid: rentang 5;
}
.item-3 {
  lajur grid: rentang 3;
  grid-row: rentang 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: Saya telah mencuba place-item: end; dan align-item: end;

Answer 1

Anda boleh menggunakan grid-column和grid-row的两个值start / endsintaks untuk menentukan di mana projek anda bermula dan berakhir.

Sebagai contoh, grid-row: 2 / span 3; akan bermula pada garisan grid ke-2 dan menjangkau 3 garisan grid sehingga garisan grid ke-5.

.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>