Bagaimanakah Grid CSS Boleh Mencapai Baris Ketinggian Sama Sementara Flexbox Tidak Boleh?

Baris Ketinggian Sama dalam Reka Letak Grid CSS

Menggunakan Flexbox untuk mencapai baris ketinggian yang sama adalah tidak praktikal kerana ketinggian baris hanya boleh menampung elemen yang terkandung di dalamnya. Walau bagaimanapun, Grid CSS menawarkan penyelesaian.

Prinsipnya

Untuk mencipta grid dengan baris ketinggian yang sama, tetapkan semua baris kepada grid-auto-rows: 1fr ialah kuncinya.

Teknik

Unit fr dalam Susun Atur Grid memperuntukkan ruang sama rata berdasarkan ruang kosong yang tersedia dalam bekas. Apabila digunakan pada baris (grid-auto-rows: 1fr), setiap baris menuntut bahagian yang sama daripada ruang kosong itu.

Alasan Di Sebalik Keajaiban

Spesifikasi Tata Letak Grid menyatakan bahawa apabila berurusan dengan grid bersaiz fleksibel (ketinggian tidak tentu), trek grid (baris) menggunakan ketinggian kandungannya. Item tertinggi dalam setiap baris menentukan ketinggian semua baris. Ketinggian maksimum ini menjadi panjang untuk 1fr, membawa kepada ketinggian baris yang sama.

Mengapa Flexbox Tidak Memotongnya

Flexbox hanya membenarkan baris ketinggian yang sama dalam baris yang sama, menjadikannya tidak sesuai untuk silang -penyamaan baris. Menurut spesifikasi Flexbox, dalam bekas berbilang baris, ketinggian garisan ditentukan oleh ketinggian minimum yang diperlukan untuk menampung item flexnya.

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