Bagaimana untuk menjadikan baris terakhir item menggunakan ruang yang tinggal dalam Grid CSS?

Question

Adakah terdapat cara untuk memaksa semua item dalam baris terakhir grid mengisi baris itu, tidak kira berapa banyak item yang ada?

Saya tidak tahu bilangan item dalam grid, jadi saya tidak boleh meletakkannya secara langsung. Saya cuba menggunakan grid-auto-flow:ensemble tetapi ia tidak membantu.

Ini adalah visualisasi masalah saya: :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
 

Answer 1

Ini boleh dilakukan sepenuhnya dengan CSS Grid dengan menggabungkan peraturan CSS nth-child dan nth-last-of type. Satu-satunya perkara yang perlu diperhatikan ialah bilangan lajur perlu diketahui terlebih dahulu.

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>