<p>Ich habe eine feste Anzahl von Spalten in einem CSS-Rasterlayout und habe Elemente, die in diesen Spalten platziert werden sollen. Die Anzahl der zu platzierenden Elemente ist geringer als die Anzahl der Spalten. </p> <p>Ich möchte, dass die Spalten rechtsbündig ausgerichtet werden, und zwar in der Reihenfolge, in der die Elemente hinzugefügt wurden. Im folgenden Code gibt es 4 linksbündig ausgerichtete Elemente und 6 leere Elemente rechts: </p> <p><br /></p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>.hello { Randstil: solide; Randfarbe: blau; } .container { Anzeige: Raster; Gitterlücke: 5px; Rastervorlagenspalten: wiederholen (10, 5rem); }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><div class="container"> <div class="hello">1</div> <div class="hello">2</div> <div class="hello">3</div> <div class="hello">4</div> </div></code></pre> <p><br /></p> <p>Ich möchte das Layout oben ändern in: </p> <pre class="brush:php;toolbar:false;">leer leer leer leer leer leer 1 2 3 4</pre> <p>Ich habe verschiedene Kombinationen von <code>[align,justify]-[content,items]</code> ausprobiert, aber keine davon hat den Effekt einer richtigen Ausrichtung erzielt. Kann CSS Grid dies erreichen? </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>