Comment placer des éléments de grille à la fin d'un conteneur

Question

J'ai un conteneur en grille et je souhaite que mes éléments soient en bas.

J'ai ce réel

Je veux ça Attentes

.container {
  affichage : grille ;
  grille-modèle-colonnes : répéter (14, 1fr);
  lignes de modèle de grille : répéter (6, 1fr);
  écart de grille : 8 px ;
  largeur : 200 px ;
  fond : bleu ;
}
.article {
  couleur de fond : rouge ;
  Couleur blanche;
}
.objet 1 {
  colonne de grille : travée 5 ;
  rangée de grille : travée 6 ;
}
.article-2 {
  colonne de grille : travée 4 ;
  ligne de grille : travée 5 ;
}
.item-3 {
  colonne de grille : travée 3 ;
  ligne de grille : travée 4 ;
}</pré>
<pre class="brush:html;toolbar:false;"><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 : j'ai essayé place-items: end et align-items: end;

Answer 1

Vous pouvez utiliser la syntaxe grid-column和grid-row的两个值start / end pour déterminer où commence et se termine votre projet.

Par exemple, grid-row: 2 / span 3; commencera à la 2ème ligne de grille et s'étendra sur 3 lignes de grille jusqu'à la 5ème ligne de grille.

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