<p>Saya mempunyai bilangan lajur tetap dalam susun atur Grid CSS dan mempunyai elemen untuk diletakkan dalam lajur ini. Bilangan elemen yang akan diletakkan adalah kurang daripada bilangan lajur. </p> <p>Saya mahu lajur dijajarkan ke kanan, mengikut tertib elemen telah ditambahkan. Dalam kod berikut, terdapat 4 elemen dijajarkan ke kiri dengan 6 elemen kosong ke kanan: </p> <p><br /></p> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hello { gaya sempadan: pepejal; warna sempadan: biru; } .bekas { paparan: grid; jurang grid: 5px; grid-template-lajur: ulang (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></pra> <p><br /></p> <p>Saya mahu menukar reka letak di atas kepada: </p> <pre class="brush:php;toolbar:false;">kosong kosong kosong kosong kosong kosong 1 2 3 4</pre> <p>Saya mencuba pelbagai kombinasi <kod>[align,justify]-[content,item]</code>, tetapi tiada satu pun daripada mereka mencapai kesan penjajaran kanan. Bolehkah CSS Grid mencapai ini? </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>