Bagaimana untuk menjajarkan elemen secara menegak ke baris terakhir dalam Grid CSS?

Question

Saya sedang meletakkan beberapa item menggunakan grid CSS, seperti ini...

#container {
  paparan: grid;
  lajur-templat-grid: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  latar belakang: teal;
  warna: putih;
  padding: 20px;
  jidar: 10px;
}

<div id="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

Bagaimanakah saya boleh menjadikan baris terakhir berpusat dan bukannya dijajar ke kiri? Saya tidak dapat menjamin bilangan item, jadi harap susun atur akan berfungsi dengan sebarang bilangan item.

Adakah ini sesuatu yang saya patut gunakan flexbox? Atau adakah grid CSS sesuai digunakan?

Answer 1

Menemui kaedah hebat tentang cara mengawal item grid yang tinggal menggunakan pemilih pseudo dalam artikel ini: Kawal Item Grid Sisa dengan Pemilih Pseudo

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  margin: 20px;
  padding: 20px;  
}
.item {
  grid-column: span 2;
  background: #AB47BC;
  padding: 20px;
}

/* 处理两个孤立项 */

.item:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}

.item:nth-last-child(2):nth-child(3n + 1) {
  grid-column-end: 4;
}

/* 处理单个孤立项 */

.item:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
}

<div class="wrapper">
    <div class="grid grid--1">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="grid grid--2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

Answer 2

CSS Grid tidak sesuai untuk menjajarkan seluruh baris kerana rel bersilang akan menghalang. Berikut penjelasan terperinci:

• Jajarkan item grid ke seluruh baris/lajur (serupa dengan item fleksibel)

Sebagai alternatif, gunakan flexbox dan set justify-content: center.

Ini akan membungkus semua item di tengah mendatar baris. Margin anda kemudiannya akan memisahkannya.

Pada baris yang berpenduduk penuh, justify-content tidak akan berfungsi kerana tiada ruang kosong untuk ia berfungsi .

Pada baris dengan ruang kosong (dalam kes anda, hanya baris terakhir), item akan kelihatan di tengah.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>