Mengapa Peratusan Ketinggian Item Grid Saya Tidak Berfungsi Seperti Yang Dijangkakan?

Mengapa Ketinggian Elemen Grid Gagal Apabila Dikira sebagai Peratusan Ketinggian Induk

Pengiraan ketinggian Grid CSS boleh mengelirukan, terutamanya apabila menggunakan peratusan. Dalam contoh yang diberikan, ketinggian item grid ditetapkan kepada 200%, tetapi ia tidak menggandakan ketinggian bekas.

Memahami Hierarki Grid

Grid item berada dalam trek, yang terkandung dalam bekas. Oleh itu, induk item grid ialah trek, bukan bekas secara langsung.

Ketinggian Peratusan dan Struktur Grid

Apabila ketinggian baris grid tidak ditakrifkan sebagai unit panjang tetap (cth., px) atau dikira sebagai sebahagian kecil daripada ruang yang tersedia (cth., 1fr), peratusan item grid ketinggian gagal. Dalam kes ini, ketinggian item grid menjadi lalai kepada automatik, dengan berkesan membenarkannya mengembangkan baris mengikut keperluan.

Menetapkan Bekas dan Tinggi Baris

Untuk memastikan elemen grid ketinggian adalah berdasarkan ketinggian bekas, tetapkan ketinggian tetap pada kedua-dua bekas dan baris. Dalam kod yang disediakan, ketinggian bekas ialah 100px, tetapi ketinggian baris ditetapkan kepada 1fr. Dengan menukar ketinggian baris kepada 100px, ketinggian 200% item grid akan menggandakan ketinggian bekas dengan betul.

Contoh Kemas Kini:

.gridContainer {
  // ...
  grid-template-rows: 100px;
}

.gridItem {
  // ...
  overflow: auto;
}

Dengan melaraskan ketinggian baris agar sepadan dengan ketinggian bekas, ketinggian item grid kini akan berkelakuan seperti yang diharapkan, menggandakan ketinggian bekas dan dengan betul membalut kandungan di dalamnya.

Atas ialah kandungan terperinci Mengapa Peratusan Ketinggian Item Grid Saya Tidak Berfungsi Seperti Yang Dijangkakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!