入門者必學：CSS Grid 基本概念

在現代網頁設計中，靈活的排版工具是必要的，而 CSS Grid 就是為此應運而生。簡單來說，CSS Grid 是一種二維的佈局模型，能讓我們更直觀地管理元素在網頁上的排列方式。它不僅提供了直觀的行與列的結構，也讓我們能夠細膩地控制每一個子元素的尺寸和位置，而這在以往的佈局方法中是難以達到的。透過 CSS Grid，我們能輕易創造出既簡單又富有視覺創意的網頁設計。

CSS Grid 的核心就在於定義『網格容器』，這個容器決定了其子元素的排列方式。首先，我們需要使用 display: grid; 屬性來定義這個網格，接著可以利用 grid-template-columns 和 grid-template-rows 來指定網格的行與列。例如：

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

這段程式碼會創建一個有三列、兩行的網格，其中前兩列的寬度分別為 100px 和 150px，最後一列為 200px，而每行的高度均為 50px。

若要減少重複的程式碼，CSS Grid 提供了 repeat() 函數，使網格佈局更簡潔靈活。這個函數可以用來自動重複定義的行或列數量與尺寸。例如：

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

這代表著有三列，每列大小為 1fr，即共享一等分的空間，兩行則為 100px 高。1fr 是指剩餘空間的 1 個比例分配單位，可以動態調整元素的佈局比例。

CSS Grid 提供了一個強大的 grid-area 屬性，讓我們可以更精準地控制每個子元素在網格中的位置。grid-area 能指定一個元素橫跨多個行和列，例如：

.item-a {
  grid-area: 1 / 1 / 3 / 3;
}

這段程式碼將 item-a 橫跨行 1 到 3、列 1 到 3，這意味著 item-a 會佔據了網格的左上角 2x2 的區域，讓你能更自由地規劃頁面佈局。

除了直接指定行與列，CSS Grid 允許透過語義化的命名來創建網格區域，讓佈局的可讀性更高。例如：

.container {
  display: grid;
  grid-template-areas: 
    'header header'
    'left right'
    'footer footer';
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}

這樣的定義方式，讓網格的結構更易於理解，此語法也方便在複雜佈局中辨識出各個區域的功能。

CSS Grid 內建的對齊屬性讓元素的定位更加靈活。在容器層級，我們可以使用 justify-items 和 align-items 來控制子項目的對齊方式。例如：

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

此設計會讓所有網格項目皆在其各自的格子中垂直和水平居中，提供了一個乾淨且一致的視覺效果。

fr 是 CSS Grid 的獨特單位，用來表示剩餘空間的比例分配。這與 px、% 的不同之處在於它提供了更多的彈性，特別是在動態設計中。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

這表示第一列會獲得 1 份剩餘空間，第二列獲得 2 份，讓佈局可以在不同視窗大小下流暢地調整。

CSS Grid 的一個亮點功能是 minmax() 函數，這讓我們能夠定義元素的最小與最大尺寸，以避免內容溢出。例如，

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

此設置意味著每個網格列的最小寬度為 100px，但隨著空間增多將均分剩餘空間，保持元素的合理佈局。

有時，網頁設計需要處理元素的重疊與層次，這是 z-index 大顯身手的時機。在 CSS Grid 中，我們同樣可以透過 z-index 來控制網格項目的層次。例如：

.item-b {
  grid-area: 1 / 2 / 2 / 3;
  z-index: 2;
}

當某個網格項目的 z-index 值較大時，它會顯示在其他項目之上，這在設計具有交互或者多層視覺效果時非常有用。

透過結合媒體查詢和 CSS Grid，我們可以輕鬆地打造出響應式設計，確保網站在不同裝置上的平穩顯示。像這樣：

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

這段程式碼會在視窗寬度小於600px時，讓網格佈局切換到單列顯示，提升小螢幕裝置的閱覽體驗。通過這樣的方法，我們可以設計出兼具彈性和美觀的網頁。