第 15 講：CSS 網格 – 輕鬆建立複雜佈局

在本次講座中，我們將深入探討CSS Grid，這是一個強大的佈局系統，可讓您完全控制行和列。雖然 Flexbox 非常適合一維佈局（行或列），但 Grid 可讓您處理二維佈局，這意味著您可以精確地設計整個網頁佈局。

1.什麼是 CSS 網格？

CSS 網格佈局，俗稱Grid，是一種 2D 佈局系統，旨在同時管理行和列。您可以將其視為矩陣或電子表格，其中每個元素都放置在網格單元中，從而實現乾淨且有組織的佈局。

2.如何建立網格

要開始使用網格，您需要透過設定 display: grid 將容器定義為網格。然後，您將使用 grid-template-rows 和 grid-template-columns 屬性定義行數和列數。

例子：

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

這將建立一個 2x2 網格，每個單元格為 100px x 100px，單元格之間有 10px 間隙。

3.定義網格區域

您也可以使用 grid-area 屬性為要佔用的項目定義特定的網格區域。這使您可以準確控制項目在網格中的放置位置。

例子：

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

此範例建立一個基本佈局，其中頁首和頁尾跨越兩列，側邊欄和主要內容佔據各自的列。 grid-template-areas 屬性可讓您定義網格的結構以及每個區域的名稱。

4.響應式網格的自動調整與自動填入

CSS 網格最好的部分之一是它很容易使其響應。自動調整和自動填滿屬性可以根據可用空間自動調整列數。

例子：

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

在此範例中，網格將自動建立適合容器內的盡可能多的列，每列至少 150px 寬。如果有額外的空間，列將拉伸以填充剩餘區域。

5.網格對齊

您可以使用 justify-items 和 align-items.

• justify-items：在網格單元內水平對齊專案。
• align-items：在網格單元內垂直對齊項目。

例子：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

這將使所有項目在其網格單元內水平和垂直居中。

6。嵌套網格

CSS Grid 還支援嵌套網格，讓您在網格項目內建立網格以實現更複雜的佈局。

例子：

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

在此範例中，其中一個網格項目包含嵌套網格，允許更靈活和詳細的佈局。

7.網格與 Flexbox：何時使用每個

• 當您需要管理一個方向（行或列）的專案佈局時，請使用 Flexbox。
• 當您需要同時管理行和列以實現複雜的多維佈局時，請使用網格。

結論

CSS 網格是網頁設計的遊戲規則改變者，提供了一種強大的方法來以最少的努力構建複雜且響應式的佈局。無論您正在處理部落格佈局、儀表板還是網站結構，網格都可以讓您靈活地輕鬆控制行和列。

在 LinkedIn 上關注我

裡多伊‧哈桑