CSS 網格 – 輕鬆建立複雜佈局

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

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

1.什麼是 CSS 網格？

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

2.如何建立網格

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

範例：

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.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 網格，每個單元格 100 像素 x 100 像素，單元格之間有 10 像素間隙。

3.定義網格區域

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

範例：

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>

.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 網格還支援巢狀網格，讓您在網格項目內建立網格以實現更複雜的佈局。

範例：

<div class="grid-container">
    <div class="item">
        <div class="nested-grid">
            <div class="nested-item">Nested 1</div>
            <div class="nested-item">Nested 2</div>
        </div>
    </div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.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 上關注我

裡多伊‧哈桑

以上是CSS 網格 – 輕鬆建立複雜佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！