Bagaimana untuk Membina Petak Responsif dalam Susun Atur Grid Menggunakan Grid CSS dan Flexbox?

Cara Membuat Reka Letak Grid dengan Petak Responsif

Dalam artikel ini, kita akan membincangkan cara membuat reka letak grid dengan petak responsif menggunakan CSS.

Pendekatan Grid CSS

Untuk Grid CSS, kita boleh menggunakan gabungan lajur-templat grid dan helah padding-bottom untuk mencipta petak responsif. Helah bahagian bawah padding memberikan nilai peratusan kepada padding segi empat sama, dengan berkesan menetapkan nisbah bidangnya kepada 1:1.

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

.square {
    padding-bottom: 100%;
}

Pendekatan Flexbox

Dengan Flexbox, kami boleh menggunakan padding yang serupa -teknik bawah untuk mencipta petak responsif. Kita boleh menetapkan item flex untuk mempunyai nisbah aspek yang sama dengan memberikan nilai peratusan pada pelapiknya.

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    padding-bottom: 100%;
}

Perhatikan bahawa kedua-dua pendekatan memerlukan penggunaan elemen pseudo atau pembungkus tambahan untuk memastikan peratus pelapik adalah digunakan pada petak itu sendiri, bukan item lentur atau gridnya.

Menggunakan Pertanyaan Media untuk Responsif

Untuk meruntuhkan reka letak grid kepada satu lajur pada skrin yang lebih kecil, kami boleh menggunakan pertanyaan media.

@media (max-width: 768px) {
    .square-container {
        grid-template-columns: 100%;
        flex-direction: column;
    }
}

Kesimpulan

Dengan menggabungkan teknik ini, kami boleh mencipta reka letak grid dengan petak responsif yang mengekalkan nisbah bidang yang konsisten merentas saiz skrin dan orientasi peranti yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Membina Petak Responsif dalam Susun Atur Grid Menggunakan Grid CSS dan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!