Bagaimanakah Saya Boleh Membuat Baris Terakhir dalam Grid CSS Menjangkau Keseluruhan Baris?

Mengisi Baris Terakhir dalam Grid CSS

Dalam Grid CSS, cabaran biasa ialah memastikan item dalam baris terakhir menduduki keseluruhan barisan. Tanpa mengetahui bilangan item yang tepat, penyelesaian mungkin kelihatan sukar difahami.

Menggunakan anak ke-n dan jenis-terakhir-ke-

Ini boleh dicapai menggunakan gabungan peraturan CSS: ke-n-anak dan ke-terakhir-dari-jenis. Peraturan ini menyasarkan elemen berdasarkan kedudukannya dalam elemen induk tertentu. Dengan peraturan ini, anda boleh melaraskan penjajaran dan saiz item dalam baris terakhir.

Kod Contoh:

Pertimbangkan CSS berikut kod:

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

Penjelasan:

• anak ke-nth(3n-1) dan ke-anak-anak(3n) elemen sasaran berdasarkan kedudukan mereka dalam bekas grid. Peraturan ini digunakan untuk menggayakan item di lajur tengah dan kanan.
• anak ke-1(3n-1):jenis-terakhir-dari-1(1) dan anak-ke-2(3n-2):ke-1 -last-of-type(1) secara khusus menyasarkan item terakhir dalam baris terakhir dan laraskan penjajaran dan rentangnya.
• Sifat lajur grid digunakan untuk mengawal rentang lajur daripada item terakhir ini, memastikan ia memenuhi seluruh baris.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Baris Terakhir dalam Grid CSS Menjangkau Keseluruhan Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!