Mengapa Ketinggian Item Grid CSS Saya Tidak Menggandakan Ketinggian Bekas Induk?

Grid CSS: Kekeliruan Pengiraan Ketinggian Elemen

Anda menghadapi masalah dengan ketinggian elemen grid CSS, khususnya .gridItem , tidak dikira seperti yang dijangkakan. Dalam persediaan grid ini:

.gridContainer {
  height: 100px;
  grid-template-rows: 1fr;
}

.gridItem {
  height: 200%;
}

Niatnya adalah untuk .gridItem menjadi dua kali ketinggian induknya, .gridContainer. Walau bagaimanapun, hasilnya nampaknya mempertimbangkan ketinggian elemen kanak-kanak sebaliknya.

Memahami Hubungan Ibu Bapa-Anak dalam Grid CSS

Apabila bekerja dengan grid CSS, adalah penting untuk memahami hubungan ibu bapa-anak. Dalam kes ini, elemen induk untuk .gridItem bukanlah .gridContainer secara langsung tetapi sebaliknya adalah runut grid yang mengandunginya.

Apabila menentukan grid-template-rows: 1fr;, anda mencipta trek dengan fleksibel ketinggian yang mengambil 1 unit pecahan ruang yang tersedia ibu bapa. Memandangkan induk ialah ketinggian tetap 100px, ketinggian trek menjadi 100px.

Oleh itu, walaupun .gridItem mempunyai ketinggian: 200%, ia merujuk kepada ketinggian trek induknya, iaitu 100px. Ini menerangkan sebab ketinggian .gridItem berkesan dua kali ganda ketinggian trek dan bukannya bekas induk.

Betulkan: Menetapkan Ketinggian Eksplisit pada Kedua-dua Bekas dan Trek

Untuk menyelesaikan isu ini, anda perlu menentukan ketinggian tetap pada kedua-dua .gridContainer dan trek grid. Ini mewujudkan hubungan ibu bapa-anak yang jelas dan membenarkan peratusan ketinggian .gridItem berfungsi dengan betul.

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

.gridItem {
  height: 200%;
}

Dengan pelarasan ini, ketinggian .gridItem kini sepatutnya dua kali ganda ketinggian .gridContainer, seperti yang dijangkakan .

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