Rumah >hujung hadapan web >tutorial css >Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?
Membuat Reka Letak Grid Responsif dengan Petak Dinamik
Anda berhasrat untuk membina reka letak grid dengan petak responsif, memastikan setiap petak mempunyai ketinggian yang sama dengan lebarnya dan dipisahkan oleh longkang. Untuk mencapai ini, anda sedang mempertimbangkan untuk menggunakan sama ada CSS Grid atau Flexbox.
CSS Grid
Menggunakan CSS Grid, anda boleh menentukan lajur grid dan ketinggian daripada segi empat sama sebagai peratusan luas grid. Berikut ialah contoh:
.square-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); gap: 10px; } .square { height: 100%; }
Flexbox
Dengan Flexbox, anda boleh mencipta reka letak responsif menggunakan sifat flex-wrap. Untuk memastikan segi empat sama mengekalkan nisbah bidang segi empat sama, anda boleh menggunakan helah bawah padding atau mencipta elemen pseudo untuk menetapkan ketinggian yang sesuai.
.square-container { display: flex; flex-wrap: wrap; } .square { flex-basis: calc(33.333% - 10px); margin: 5px; border: 1px solid; box-sizing: border-box; } .square::before { content: ''; display: block; padding-top: 100%; }
Pertimbangan Tambahan
Atas ialah kandungan terperinci Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!