CSS Grid 格線佈局

CSS Grid 是一種二維的佈局系統，可以同時控制行 (row) 和列 (column)，非常適合用於網頁的整體佈局和複雜的格狀設計。

基本概念

Grid 佈局包含：

• Grid 容器 (Container)：設定 display: grid 的父元素
• Grid 項目 (Items)：容器內的直接子元素
• Grid 線 (Lines)：分隔行和列的線
• Grid 軌道 (Tracks)：兩條相鄰格線之間的空間（行或列）
• Grid 儲存格 (Cell)：行和列交會的最小單位
• Grid 區域 (Area)：一個或多個儲存格組成的矩形區域

.container {
  display: grid;
}

定義列和行

grid-template-columns

定義列的數量和寬度。

.container {
  grid-template-columns: 200px 200px 200px; /* 三欄，各 200px */
  grid-template-columns: 1fr 1fr 1fr; /* 三欄，等分 */
  grid-template-columns: 200px 1fr 200px; /* 固定-彈性-固定 */
  grid-template-columns: repeat(3, 1fr); /* 三欄，等分 */
  grid-template-columns: repeat(4, 100px); /* 四欄，各 100px */
}

grid-template-rows

定義行的數量和高度。

.container {
  grid-template-rows: 100px 200px; /* 兩行 */
  grid-template-rows: auto 1fr auto; /* 頭-內容-尾 */
  grid-template-rows: repeat(3, 100px); /* 三行，各 100px */
}

fr 單位

fr (fraction) 表示剩餘空間的比例。

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 的比例 */
}

repeat() 函數

簡化重複的軌道定義。

/* 等同於 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);

/* 混合使用 */
grid-template-columns: 100px repeat(3, 1fr) 100px;

minmax() 函數

設定軌道的最小和最大值。

grid-template-columns: minmax(100px, 200px) 1fr 1fr;
grid-template-columns: repeat(3, minmax(200px, 1fr));

auto-fill 和 auto-fit

自動填充盡可能多的軌道。

/* 自動填充，每欄最小 200px */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit：空白欄會收縮 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap 間距

設定行和列之間的間距。

.container {
  gap: 20px; /* 行列間距相同 */
  gap: 20px 10px; /* 行間距 列間距 */
  row-gap: 20px; /* 只設行間距 */
  column-gap: 10px; /* 只設列間距 */
}

對齊

justify-items

設定項目在儲存格內的「水平」對齊。

.container {
  justify-items: stretch; /* 拉伸填滿（預設） */
  justify-items: start; /* 靠左 */
  justify-items: end; /* 靠右 */
  justify-items: center; /* 置中 */
}

align-items

設定項目在儲存格內的「垂直」對齊。

.container {
  align-items: stretch; /* 拉伸填滿（預設） */
  align-items: start; /* 靠上 */
  align-items: end; /* 靠下 */
  align-items: center; /* 置中 */
}

place-items

align-items 和 justify-items 的縮寫。

.container {
  place-items: center; /* 水平垂直都置中 */
  place-items: start end; /* 垂直靠上，水平靠右 */
}

justify-content

當 Grid 總大小小於容器時，設定整個 Grid 的「水平」對齊。

.container {
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

align-content

當 Grid 總大小小於容器時，設定整個 Grid 的「垂直」對齊。

.container {
  align-content: start;
  align-content: end;
  align-content: center;
  align-content: space-between;
}

命名格線

可以為格線命名，方便項目定位。

.container {
  grid-template-columns: [start] 200px [content-start] 1fr [content-end] 200px [end];
  grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end footer-start] 60px [footer-end];
}

.header {
  grid-column: start / end;
  grid-row: header-start / header-end;
}

grid-template-areas

用視覺化的方式定義 Grid 區域。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    'header header header'
    'sidebar main aside'
    'footer footer footer';
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.aside {
  grid-area: aside;
}
.footer {
  grid-area: footer;
}

用 . 表示空白區域：

grid-template-areas:
  'header header header'
  'sidebar main .'
  'footer footer footer';

實用範例

基本三欄佈局

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
}

響應式卡片

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

經典頁面佈局

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  min-height: 100vh;
}

等高卡片

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

/* Grid 項目預設就會等高 */

圖片網格

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

Subgrid (次級格線)

subgrid 是 CSS Grid 的一項進階特性，它允許巢狀的 Grid 項目直接沿用其父容器的格線。這對於解決「不同卡片內部的標題或按鈕需要對齊」的場景非常有用。

.parent-grid {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 頭、身、尾 */
}

.child-item {
  /* 讓子元素也成為 grid，但它的行 (rows) 直接採用父元素的格線 */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

使用 subgrid 後，即便 child-item 內部的內容高度不同，它們依然能完美地在父格線中對齊。

Grid 項目的定位屬性請參考 CSS Grid 項目屬性。