Bagaimanakah Saya Boleh Membuat Item Grid Span ke Baris/Lajur Terakhir dalam Grid CSS?

Bolehkah Item Grid Menjangkau ke Baris/Lajur Terakhir dalam Grid Tersirat?

Dalam Grid CSS, adalah mungkin untuk membuat item grid menjangkau hingga baris/lajur terakhir dalam grid eksplisit menggunakan integer negatif. Walau bagaimanapun, teknik ini tidak berfungsi untuk grid tersirat.

Grid Tersirat

Grid tersirat tidak mempunyai bilangan baris dan lajur yang tetap, jadi tidak mungkin untuk menentukan secara langsung rentang ke baris/lajur terakhir. Sebagai contoh, pertimbangkan grid berikut dengan bilangan baris yang tidak diketahui:

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

Spanning dalam Grid Tersirat

Untuk membuat rentang item dari yang pertama hingga yang terakhir baris dalam grid tersirat, anda boleh menggunakan kedudukan mutlak. Dalam contoh ini, kami meletakkan kotak ketiga di atas kotak lain dan kemudian mengimbanginya ke bawah supaya ia kelihatan merentangi baris:

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

Grid Eksplisit

Dalam grid eksplisit, di mana baris dan lajur ditakrifkan secara eksplisit, anda boleh menggunakan integer negatif untuk menjangkau ke yang terakhir baris/lajur. Ini digambarkan di bawah:

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

Dalam contoh ini, elemen .item akan merentangi keseluruhan lajur dan baris kedua grid.

Kesimpulan

Walaupun Grid CSS tidak menawarkan cara langsung untuk menjangkau ke baris/lajur terakhir dalam grid tersirat, anda boleh mencapai ini dengan kedudukan mutlak. Walau bagaimanapun, dalam grid eksplisit, anda boleh menggunakan integer negatif untuk tujuan ini.

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