Cara menjajarkan elemen grid dengan betul

Question

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.

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:

<code>.hello {
  gaya sempadan: pepejal;
  warna sempadan: biru;
}

.bekas {
  paparan: grid;
  jurang grid: 5px;
  grid-template-lajur: ulang (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></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

Saya mencuba pelbagai kombinasi [align,justify]-[content,item], tetapi tiada satu pun daripada mereka mencapai kesan penjajaran kanan. Bolehkah CSS Grid mencapai ini?

Answer 1

Disebabkan bilangan yang terhad, anda boleh menentukannya secara manual

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

Tetapi lebih baik menggunakan 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>