Bagaimana untuk Sama-sama Mengedarkan Item dalam Baris Terakhir Grid CSS?

Grid CSS: Mengagihkan Item Baris Terakhir Secara Sama-sama

Dalam usaha reka bentuk web kami, sering timbul keperluan untuk mengagihkan item secara sama rata dalam grid susun atur, terutamanya dalam baris terakhir. Tugasan ini mudah dicapai dengan kuasa gabungan peraturan ke-nth-child dan ke-nth-last-of-type. Walau bagaimanapun, prasyarat untuk kaedah ini ialah mengetahui bilangan lajur dalam grid anda.

Pertimbangkan penanda berikut:

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

Dan peraturan CSS yang disertakan ini:

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

Dalam contoh ini, grid ditakrifkan dengan tiga lajur dan kami menentukan pengedaran dan penggayaan item dalam baris terakhir menggunakan nth-child dan nth-last-of-type. Sempadan ditambahkan untuk menunjukkan kesan visual.

Peraturan css digunakan pada nth-child(3n-1):nth-last-of-type(1) atau nth-child(3n-2): nth-last-of-type(1) memastikan bahawa item terakhir dalam lajur kedua dan ketiga akan menjangkau dua atau tiga lajur, masing-masing dan secara estetik menggunakan ruang yang tinggal dalam baris.

Atas ialah kandungan terperinci Bagaimana untuk Sama-sama Mengedarkan Item dalam Baris Terakhir Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!