CSS Grid 基礎

CSS Grid 基礎

CSS Grid 是一種二維佈局系統，用於在網頁中構建複雜的佈局結構。與 Flexbox 不同，Grid 可以同時處理行和列的佈局，這使得它特別適合需要在兩個維度（水平和垂直）上進行控制的佈局情況，如網格佈局、畫廊、數據面板等。

1. Grid 基本概念

CSS Grid 的佈局結構包括以下主要元素：

• 網格容器（Grid Container）：設置為 display: grid 或 display: inline-grid 的元素，它包含了所有網格項目。
• 網格項目（Grid Items）：網格容器內的直接子元素，這些元素被放置在網格佈局中。
• 網格線（Grid Lines）：構成網格的行和列的邊界線。
• 網格單元格（Grid Cell）：網格線之間的空間，單個網格項目可以佔用一個或多個網格單元格。
• 網格軌道（Grid Tracks）：由行線和列線之間的區域形成的行軌道和列軌道。
• 網格區域（Grid Areas）：由多個相鄰的網格單元格組成的區域。

2. Grid 容器屬性

設置元素為網格容器後，可以使用以下屬性來控制內部項目的佈局：

• display: 定義容器為網格。
  • grid: 將元素定義為塊級網格容器。
  • inline-grid: 將元素定義為行內網格容器。

  範例:

  .container {
      display: grid; /* 定義容器為網格 */
  }
  

• grid-template-columns: 定義網格的列軌道數量和寬度。
  • 接受一個或多個長度值（如 px、%）或 CSS 函數（如 fr、minmax()）。
  • 例如：grid-template-columns: 200px 1fr 2fr; 定義三列，分別為 200px、1 個比例單位和 2 個比例單位。
• grid-template-rows: 定義網格的行軌道數量和高度。
  • 接受與 grid-template-columns 相同的值。
  • 例如：grid-template-rows: 100px auto 50px; 定義三行，分別為 100px、高度自適應（auto）和 50px。
• grid-template-areas: 定義網格區域的名稱和佈局。
  • 使用雙引號包裹的字符串表示每一行，並使用唯一名稱標識每個區域。
  • 例如：

    .container {
        display: grid;
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
    }
    

• grid-column-gap 或 column-gap: 定義列之間的間距。
  • 例如：grid-column-gap: 20px; 或 column-gap: 20px;
• grid-row-gap 或 row-gap: 定義行之間的間距。
  • 例如：grid-row-gap: 10px; 或 row-gap: 10px;
• gap: 同時設置行和列之間的間距。
  • 例如：gap: 10px 20px;（行間距 10px，列間距 20px）。

3. Grid 項目屬性

網格項目屬性用於控制單個網格項目的位置和大小。

• grid-column: 指定項目應該從哪一列開始和結束。
  • 語法：grid-column: [start] / [end]; 例如：grid-column: 1 / 3; 將項目從第一列開始延伸到第三列。
• grid-row: 指定項目應該從哪一行開始和結束。
  • 語法：grid-row: [start] / [end]; 例如：grid-row: 2 / 4; 將項目從第二行開始延伸到第四行。
• grid-area: 指定項目放置在哪個網格區域中。
  • 使用 grid-template-areas 定義的區域名稱。
  • 例如：grid-area: header;
• justify-self: 控制網格項目在單元格內的水平對齊。
  • 值可以是 start、end、center、stretch（默認）。
• align-self: 控制網格項目在單元格內的垂直對齊。
  • 值可以是 start、end、center、stretch（默認）。
• place-self: 同時設置 align-self 和 justify-self。
  • 例如：place-self: center start;

4. 範例應用

以下範例展示了如何使用 Grid 創建一個簡單的網頁佈局，包括標題區、側邊欄、主要內容和頁腳。

HTML:

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

CSS:

.grid-container {
    display: grid; /* 定義為網格容器 */
    grid-template-columns: 1fr 3fr; /* 兩列，第一列占 1 比例單位，第二列占 3 比例單位 */
    grid-template-rows: auto 1fr auto; /* 三行，高度自適應 */
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    gap: 10px; /* 行和列之間的間距 */
}

.header {
    grid-area: header;
    background-color: #f8f9fa;
}

.sidebar {
    grid-area: sidebar;
    background-color: #e9ecef;
}

.main {
    grid-area: main;
    background-color: #dee2e6;
}

.footer {
    grid-area: footer;
    background-color: #f1f3f5;
}

Header

Main Content

5. 常見應用場景

• 固定和流動佈局：可以將頁面的一部分設置為固定寬度，其他部分設置為自適應寬度。
• 畫廊佈局：創建圖片畫廊，輕鬆設置圖片的行和列數量以及間距。
• 儀表板佈局：創建數據面板、儀表板等，使用網格定義各個區塊的位置和大小。

6. 小結

CSS Grid 是一種非常強大的佈局系統，能夠處理二維佈局問題。通過定義網格容器和項目屬性，可以靈活地控制網頁中元素的排列方式。掌握 CSS Grid 的基本用法和進階技巧，能夠幫助你實現更加複雜和多樣化的網頁佈局設計。