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

Buat Span Item Grid ke Baris / Lajur Terakhir dalam Grid Tersirat

Pengenalan

Dalam grid tersirat, di mana bilangan baris dan lajur tidak ditakrifkan secara eksplisit, ia boleh mencabar untuk menjangkau item grid ke baris atau lajur terakhir tanpa mengetahuinya nombor tepat. Soalan ini meneroka kemungkinan untuk mencapai ini dengan Grid CSS.

Adakah Mungkin?

Dalam versi semasanya, Grid CSS tidak boleh terus menjangkau item grid dari yang pertama ke baris/lajur terakhir dalam grid tersirat. Walaupun integer negatif boleh digunakan untuk mengira dari tepi hujung dalam grid eksplisit, pendekatan ini tidak boleh digunakan dalam senario ini.

Penyelesaian Alternatif Menggunakan Kedudukan Mutlak

Sementara pengehadan Grid menghalang daripada merentang ke yang terakhir baris/lajur, kedudukan mutlak menawarkan penyelesaian yang berpotensi. Dengan meletakkan item secara mutlak di dalam bekas, ia boleh diletakkan dan diregangkan untuk mengisi ruang ke hujung grid tersirat.

Contoh Menggunakan Kedudukan Mutlak

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  height: 200px;
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="item">Item</div>
  ... other grid items
</div>

Dalam contoh ini, .item diletakkan secara mutlak dan diregangkan untuk mengisi keseluruhan ketinggian bekas, mewujudkan ilusi merentang hingga akhir baris.

Kesimpulan

Walaupun pengehadan Grid CSS tidak membenarkan rentang terus ke baris/lajur terakhir dalam grid tersirat, teknik alternatif seperti kedudukan mutlak boleh digunakan untuk mencapai kesan yang sama.

Atas ialah kandungan terperinci Bolehkah Grid CSS Menjangkau Item Grid ke Baris/Lajur Terakhir dalam Grid Tersirat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!