<p>J'ai un nombre fixe de colonnes dans une disposition de grille CSS et j'ai des éléments à placer dans ces colonnes. Le nombre d'éléments à placer est inférieur au nombre de colonnes. </p> <p>Je souhaite que les colonnes soient alignées à droite, dans l'ordre dans lequel les éléments ont été ajoutés. Dans le code suivant, il y a 4 éléments alignés à gauche avec 6 éléments vides à droite : </p> <p><br /></p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>.bonjour { style de bordure : solide ; couleur de la bordure : bleu ; } .récipient { affichage : grille ; écart de grille : 5 px ; grille-modèle-colonnes : répéter (10, 5rem ); }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><div class="container"> <div class="bonjour">1</div> <div class="bonjour">2</div> <div class="bonjour">3</div> <div class="bonjour">4</div> </div></code></pre> <p><br /></p> <p>Je souhaite modifier la mise en page ci-dessus comme suit : </p> <pre class="brush:php;toolbar:false;">vide vide vide vide vide vide 1 2 3 4</pre> <p>J'ai essayé diverses combinaisons de <code>[align,justify]-[content,items]</code>, mais aucune d'entre elles n'a obtenu l'effet d'un alignement correct. CSS Grid peut-il y parvenir ? </p>

.hello {
  border-style: solid;
  border-color: blue;
}

.container {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(10, 3rem);
  margin: 5px;
}

.container > :nth-last-child(1) {grid-column-end: -1}
.container > :nth-last-child(2) {grid-column-end: -2}
.container > :nth-last-child(3) {grid-column-end: -3}
.container > :nth-last-child(4) {grid-column-end: -4}
.container > :nth-last-child(5) {grid-column-end: -5}
.container > :nth-last-child(6) {grid-column-end: -6}
.container > :nth-last-child(7) {grid-column-end: -7}
.container > :nth-last-child(8) {grid-column-end: -8}
.container > :nth-last-child(9) {grid-column-end: -9}

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
  <div class="hello">5</div>
  <div class="hello">6</div>
</div>

.hello {
  border-style: solid;
  border-color: blue;
  width: 3rem;
}

.container {
  display: flex;
  gap: 5px;
  width: calc(10*3rem + 9*5px);
  margin: 5px;
}

.container > :first-child {margin-left:auto}

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
  <div class="hello">5</div>
  <div class="hello">6</div>
</div>