Grid Template Areas (網格模板區域)

• 定義: 使用 grid-template-areas 屬性來命名網格區域，讓我們可以更直觀地排版網格中的內容。
• 語法:

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

• 重點: grid-template-areas 提供更具可讀性的佈局方式，適合複雜的頁面結構設計。

Grid Template Columns/Rows (模板列與行)

• 定義: 使用 grid-template-columns 和 grid-template-rows 設定每一列和每一行的大小。
• 語法:

  .container {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 100px auto 50px;
  }
  

  • 200px 表示固定寬度。
  • 1fr 表示可用空間的分配比例。
  • 適合調整每個區塊的相對大小，適應不同的設計需求。

repeat() 函數

• 定義: repeat() 函數可以幫助簡化定義多個相似大小的列或行。
• 語法:

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

repeat(3, 1fr) 會自動生成 3 個等寬的網格單位，讓佈局更簡潔明了。

auto-fill 和 auto-fit

• 定義: auto-fill 和 auto-fit 是用來自動填充格子內容的關鍵字，適合動態響應的佈局設計。
• 語法:

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

  • auto-fill 會盡可能地填充列，當空間足夠時會繼續添加新的列。
  • auto-fit 則會根據內容調整網格列的大小，適應現有的空間。

minmax() 函數

• 定義: 使用 minmax() 設定列或行的最小值與最大值，讓網格具備更好的彈性。
• 語法:

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

minmax() 讓每個網格的列至少有 100px，並且最多可以佔據剩餘空間的 1fr。

justify-content 和 align-content

• 定義: 這兩個屬性用來調整網格內容在容器中的對齊方式。
  • justify-content: 水平對齊。
  • align-content: 垂直對齊。
• 語法:

  .container {
    display: grid;
    justify-content: center;
    align-content: center;
  }
  

當網格項目未完全佔據網格容器時，可以用這些屬性來控制它們在剩餘空間中的對齊方式。