So platzieren Sie Gitterelemente am Ende eines Containers

Question

Ich habe einen Gitterbehälter und möchte, dass meine Artikel ganz unten sind.

Ich habe dieses aktuelle

Ich will das Erwartungen

.container {
  Anzeige: Raster;
  Rastervorlagenspalten: wiederholen (14, 1fr);
  Rastervorlagenzeilen: wiederholen (6, 1fr);
  Gitterlücke: 8px;
  Breite: 200px;
  Hintergrund: blau;
}
.Artikel {
  Hintergrundfarbe: rot;
  Farbe weiß;
}
.Gegenstand 1 {
  Gitterspalte: Spanne 5;
  Rasterzeile: Spanne 6;
}
.item-2 {
  Gitterspalte: Spanne 4;
  Rasterzeile: Spanne 5;
}
.item-3 {
  Gitterspalte: Spanne 3;
  Rasterzeile: Spanne 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: Ich habe place-items: end; und align-items: end;

Answer 1

您可以使用grid-column和grid-row的两个值start / end语法来确定项目的起始和结束位置。

例如，grid-row: 2 / span 3;将从第2个网格线开始，跨越3个网格线，直到第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>