掌握響應式佈局：使用 CSS 網格實現複雜設計

建立響應式佈局是 Web 開發人員面臨的常見挑戰。在本部落格中，我們將探討如何使用不同的 CSS 技術來實現特定的響應式設計，並專注於為什麼 CSS 網格是這種特定佈局的最佳方法。

挑戰

我們需要建立一個佈局，其中：

桌面視圖：

• DIV 1 和 DIV 3 垂直堆疊在左側，各佔左列的 50%。
• DIV 2 佔據右列的整個高度。

手機查看：

• 所有三個 div 垂直堆疊。

為什麼 Flexbox 存在不足

Flexbox 對於一維佈局非常出色，但對於像我們這樣的複雜二維佈局卻很困難。原因如下：

 <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%;
    }
}

Flexbox 的問題

在此彈性盒設定：

• DIV 2 無法自動調整其高度以符合 DIV 1 和 DIV 3 的組合高度。
• Flexbox 主要用於一維佈局（行或列），而不是複雜的二維排列。

CSS 網格解決方案

CSS Grid 擅長創建二維佈局，非常適合這項挑戰。

 <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%;
    }
}

解釋

網格佈局：

• 定義一個兩列兩行的網格。
• 將 DIV 1 放置在第一列和第一行。
• 將 DIV 2 放置在第二列中，跨越兩行。
• 將 DIV 3 放置在第一列和第二行。

響應式設計：

• 對於 768 像素或更窄的螢幕，佈局切換為 Flex，垂直堆疊項目。

結論

雖然 Flexbox 非常適合簡單的一維佈局，但 CSS Grid 提供了更複雜的二維設計所需的功能和靈活性。透過使用 CSS Grid，我們可以輕鬆地以最少的程式碼和最大的控制實現所需的響應式佈局。

請隨意調整此範例以適合您自己的項目，並享受使用 CSS 網格進行響應式佈局的好處！

以上是掌握響應式佈局：使用 CSS 網格實現複雜設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！