Bagaimanakah Saya Boleh Membuat Baris Terakhir dalam Grid CSS Menjangkau Keseluruhan Baris?-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

Dec 21, 2024 am 09:03 AM

How Can I Make the Last Row in a CSS Grid Span the Entire Row?

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 &gt; *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}
 
.grid &gt; *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}
 
.grid &gt; *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}
 
.grid &gt; *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

Salin selepas log masuk

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn