Mengapa Peratusan Tinggi Item Grid Saya Tidak Berfungsi dengan Betul?

Mengapa Ketinggian Elemen Grid Saya Tidak Dikira dengan Betul?

Pengiraan ketinggian yang salah mungkin berpunca daripada cara peratusan ketinggian ditafsirkan dalam grid CSS reka letak.

Dalam kod anda, bekas grid mempunyai ketinggian tetap 100px, manakala item grid mempunyai ketinggian 200%. Biasanya, anda menjangkakan item grid menduduki dua kali ganda ketinggian bekas (200px). Walau bagaimanapun, ini tidak berlaku dalam kes anda.

Sebabnya ialah dalam reka letak grid CSS, unsur grid wujud di dalam trek, yang seterusnya wujud dalam bekas. Item grid menduduki baris atau lajur dalam trek, bukan terus dalam bekas.

Oleh itu, peratusan ketinggian item grid adalah relatif kepada ketinggian trek yang didudukinya, bukan ketinggian bekas. Dalam kod anda, baris tersebut mempunyai ketinggian automatik lalai, yang membenarkan item grid meregangkan mengikut keperluan.

Untuk menyelesaikan isu ini, anda mesti menetapkan ketinggian khusus untuk baris yang diduduki item grid. Ini akan memastikan bahawa peratusan ketinggian item grid dikira dengan betul berbanding ketinggian tersebut. Dalam kod anda yang diubah suai, ketinggian baris telah ditetapkan kepada 100px untuk sepadan dengan ketinggian bekas, menghasilkan tingkah laku yang diingini:

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}

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