Comment aligner correctement les éléments de la grille

Question

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.

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 :

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

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

Je souhaite modifier la mise en page ci-dessus comme suit :

vide vide vide vide vide vide 1 2 3 4

J'ai essayé diverses combinaisons de [align,justify]-[content,items], mais aucune d'entre elles n'a obtenu l'effet d'un alignement correct. CSS Grid peut-il y parvenir ?

Answer 1

En raison du nombre limité, vous pouvez les définir manuellement

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

Mais il vaut mieux utiliser flexbox :

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