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

• Untuk memusatkan teks dalam petak, anda boleh menggunakan paparan: flex; harta dengan justify-content: pusat; dan align-item: center;.
• Helah padding-bottom mungkin memberikan hasil yang tidak boleh dipercayai dalam penyemak imbas lama.
• Untuk memastikan nisbah bidang segi empat sama yang konsisten, letakkan elemen kandungan sepenuhnya dalam petak.

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!