Bagaimanakah Grid CSS Boleh Mencapai Baris Ketinggian Sama Di Mana Flexbox Gagal?

Baris Ketinggian Sama dalam Reka Letak Grid CSS: Cara yang Lebih Baik

Walaupun Flexbox tidak dapat menampung baris ketinggian yang sama merentas semua baris, Grid CSS menawarkan penyelesaian. Dengan memanfaatkan unit fr, anda boleh mencapai kesan ini dengan mudah.

Cara Sihir Reka Letak Grid Berlaku

Dalam Reka Letak Grid CSS, unit fr menandakan panjang fleksibel yang mengagihkan ruang kosong dalam bekas grid . Menetapkan semua baris kepada 1fr diterjemahkan kepada baris ketinggian yang sama.

Walau bagaimanapun, keajaibannya terletak pada takrifan fr. Dalam kes di mana ketinggian bekas grid tidak ditentukan, fr trek (dalam kes ini, baris) menyesuaikan diri dengan ketinggian kandungannya.

Kandungan tertinggi dalam grid menentukan ketinggian kandungan maksimum, yang menjadi panjang 1fr. Jadi, 1fr secara automatik mencipta baris ketinggian yang sama dengan mencerminkan ketinggian "sel" tertinggi dalam grid.

Mengapa Flexbox Jatuh Pendek

Flexbox, sementara berguna untuk baris ketinggian yang sama pada baris yang sama , goyah merentasi berbilang baris. Mengikut spesifikasi flexbox, ketinggian setiap baris hanya mencukupi untuk menampung item flex pada baris tersebut. Sekatan ini menghalang baris ketinggian yang sama merentas baris.

Atas ialah kandungan terperinci Bagaimanakah Grid CSS Boleh Mencapai Baris Ketinggian Sama Di Mana Flexbox Gagal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!