Comment faire en sorte que la dernière ligne d'éléments occupe l'espace restant dans la grille CSS ?

Question

Existe-t-il un moyen de forcer tous les éléments de la dernière ligne de la grille à remplir cette ligne, quel que soit leur nombre ?

Je ne connais pas le nombre d'éléments dans la grille, je ne peux donc pas les positionner directement. J'ai essayé d'utiliser grid-auto-flow:ensemble mais cela n'a pas vraiment aidé.

Voici une visualisation de mon problème : :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

Answer 1

C'est tout à fait possible avec CSS Grid en combinant les règles CSS de type nth-child et nth-last-of. La seule chose à noter est que le nombre de colonnes doit être connu à l'avance.

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>