Mengapa Item Grid Ketinggian 200% Saya Tidak Memenuhi Bekas Induk?

Pengiraan Ketinggian Elemen Grid

Soalan:

Dalam susun atur grid CSS, grid ketinggian item ditetapkan kepada 200%, tetapi ia tidak mengembang agar sesuai dengan ketinggian bekas induk. Sebaliknya, ia kekal sebagai ketinggian elemen anaknya. Mengapa ini berlaku?

Jawapan:

Pengiraan ketinggian untuk elemen grid ditentukan oleh kedudukannya dalam struktur grid. Induk item grid bukanlah bekas, tetapi trek tempat ia berada.

Dalam kes ini, ketinggian kontena ditetapkan pada 100px, tetapi ketinggian baris ditetapkan kepada 1fr, yang merupakan unit panjang fleksibel . Akibatnya, peratusan ketinggian (200%) item grid adalah relatif kepada ketinggian trek, membolehkan item mengembangkan trek secara menegak.

Penyelesaian:

Untuk memastikan item grid mengembang untuk memenuhi ketinggian bekas, ketinggian baris juga mesti ditetapkan. Dengan menetapkan ketinggian baris kepada nilai yang sama dengan ketinggian bekas (cth., grid-template-rows: 100px), peratusan ketinggian item grid akan dikira dengan betul berdasarkan ketinggian bekas.

.gridContainer {
  grid-template-rows: 100px; /* Adjustment; previously set to 1fr */
}

Dengan pelarasan ini, item grid kini akan menduduki ketinggian penuh bekas dan sebarang kandungan yang melimpah akan disembunyikan oleh bar skrol.

Atas ialah kandungan terperinci Mengapa Item Grid Ketinggian 200% Saya Tidak Memenuhi Bekas Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!