Menguasai Reka Letak Responsif: Mencapai Reka Bentuk Kompleks dengan Grid CSS

Mencipta reka letak responsif ialah cabaran biasa bagi pembangun web. Dalam blog ini, kami akan meneroka cara untuk mencapai reka bentuk responsif khusus menggunakan teknik CSS yang berbeza, memfokuskan pada sebab Grid CSS ialah pendekatan terbaik untuk reka letak khusus ini.

Cabaran

Kita perlu membuat reka letak di mana:

Paparan Desktop:

• DIV 1 dan DIV 3 tindanan secara menegak di sebelah kiri, setiap satu mengambil 50% daripada lajur kiri.
• DIV 2 mengambil ketinggian penuh lajur kanan.

Paparan Mudah Alih:

• Ketiga-tiga div disusun secara menegak.

Mengapa Flexbox Terjatuh Short

Flexbox sangat baik untuk reka letak satu dimensi tetapi bergelut dengan reka letak dua dimensi yang kompleks seperti kami. Inilah sebabnya:

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Isu dengan Flexbox

Dalam persediaan flexbox ini:

• DIV 2 tidak boleh melaraskan ketinggiannya secara automatik agar sepadan dengan ketinggian gabungan DIV 1 dan DIV 3.
• Flexbox terutamanya untuk reka letak satu dimensi (sama ada baris atau lajur), bukan susunan dua dimensi yang kompleks.

Penyelesaian Grid CSS

Grid CSS cemerlang dalam mencipta reka letak dua dimensi, menjadikannya sempurna untuk cabaran ini.

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

Penjelasan

Susun Atur Grid:

• Mentakrifkan grid dengan dua lajur dan dua baris.
• Kedudukan DIV 1 dalam lajur pertama dan baris pertama.
• Kedudukan DIV 2 dalam lajur kedua, merangkumi dua baris.
• Kedudukan DIV 3 dalam lajur pertama dan baris kedua.

Reka Bentuk Responsif:

• Untuk skrin 768px atau lebih sempit, reka letak bertukar kepada fleksibel, menyusun item secara menegak.

Kesimpulan

Walaupun Flexbox bagus untuk reka letak satu dimensi yang lebih ringkas, Grid CSS menyediakan kuasa dan fleksibiliti yang diperlukan untuk reka bentuk dua dimensi yang lebih kompleks. Dengan menggunakan Grid CSS, kami boleh mencapai reka letak responsif yang diingini dengan mudah dengan kod minimum dan kawalan maksimum.

Jangan ragu untuk menyesuaikan contoh ini agar sesuai dengan projek anda sendiri dan nikmati faedah menggunakan Grid CSS untuk reka letak responsif anda!

Atas ialah kandungan terperinci Menguasai Reka Letak Responsif: Mencapai Reka Bentuk Kompleks dengan Grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!