So richten Sie Rasterelemente richtig aus

Question

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.

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:

<code>.hello {
  Randstil: solide;
  Randfarbe: blau;
}

.container {
  Anzeige: Raster;
  Gitterlücke: 5px;
  Rastervorlagenspalten: wiederholen (10, 5rem);
}</code>

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

Ich möchte das Layout oben ändern in:

leer leer leer leer leer leer 1 2 3 4

Ich habe verschiedene Kombinationen von [align,justify]-[content,items] ausprobiert, aber keine davon hat den Effekt einer richtigen Ausrichtung erzielt. Kann CSS Grid dies erreichen?

Answer 1

由于数量有限，您可以手动定义它们

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

但最好使用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>